HTML DOM blur() 메서드

<시간/>

HTML DOM blur() 메서드는 특정 요소에서 키보드 포커스를 제거하는 데 사용됩니다. 흐림을 사용하여 HTML 요소에 흐림을 추가하거나 흐림을 제거할 수 있습니다. Blur() 메서드는 사용자 입력을 기반으로 요소에 특히 집중할 수 있으므로 웹 페이지 탐색을 개선하는 데 도움이 될 수 있습니다.

구문

다음은 blur() 메서드의 구문입니다 -

Object.blur()

예시

blur() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   a{
      text-decoration:none;
      font-size:20px;
   }
   a:focus, a:active {
      color: red;
      text-decoration:underline;
      font-size:40px;
   }
</style>
</head>
<body>
<a id="Anchor" href="https://example.com">example.com</a>
<p>Give focus or remove focus…</p>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
   function getfocus() {
      document.getElementById("Anchor").focus();
   }
   function losefocus() {
      document.getElementById("Anchor").blur();
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM blur() 메서드

"초점 얻기"를 클릭하면 -

HTML DOM blur() 메서드

"초점 잃기"를 클릭하면 원본과 동일합니다. −

HTML DOM blur() 메서드

위의 예에서 -

먼저 ID가 "Anchor"이고 href="https://www.example.com"인 앵커 태그를 만들었습니다. −

<a id="Anchor" href="https://example.com">example.com</a>

그런 다음 앵커 태그에 대해 두 가지 스타일을 정의하여 포커스가 있고 활성화되어 있을 때와 그렇지 않을 때를 구분합니다.

a{
   text-decoration:none;
   font-size:20px;
}
a:focus, a:active {
   color: red;
   text-decoration:underline;
   font-size:40px;
}

그런 다음 getfocus() 및 lossfocus() 함수를 각각 실행하기 위해 두 개의 "초점 얻기" 및 "초점 상실" 버튼을 만들었습니다.

<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">

getfocus() 함수는 우리의 경우 요소와 관련된 "Anchor" id를 가진 요소를 가져옵니다. 그런 다음 a:focus,a:active 스타일에 대한 링크를 변경하는 focus 메서드를 실행합니다. 즉, 색상은 녹색, 텍스트에는 밑줄이 그어지며 글꼴 크기는 40픽셀로 증가합니다.

function getfocus() {
   document.getElementById("Anchor").focus();
}

Lossfocus() 함수는 우리의 경우 요소인 "Anchor" ID가 연결된 요소를 가져옵니다. 그런 다음 blur() 메서드를 실행하여 위의 링크에서 포커스를 느슨하게 하고 링크 스타일을 요소의 원래 스타일로 변경합니다.

function losefocus() {
   document.getElementById("Anchor").blur();
}