Phương pháp HTML DOM mờ ()

Phương thức HTML DOM dim () được sử dụng để xóa tiêu điểm bàn phím khỏi một phần tử cụ thể. Sử dụng tính năng làm mờ, chúng tôi có thể thêm làm mờ hoặc xóa mờ cho bất kỳ phần tử HTML nào. Phương thức mờ () có thể giúp điều hướng tốt hơn xung quanh trang web vì chúng tôi có thể tập trung cụ thể vào một phần tử dựa trên đầu vào của người dùng.

Cú pháp

Sau đây là cú pháp cho phương thức mờ () -

Object.blur()

Ví dụ

Hãy để chúng tôi xem một ví dụ về phương thức mờ () -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương pháp HTML DOM mờ ()

Khi nhấp vào “Lấy tiêu điểm” -

Phương pháp HTML DOM mờ ()

Khi nhấp vào "Mất tiêu điểm", nó sẽ giống như ban đầu -

Phương pháp HTML DOM mờ ()

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một thẻ liên kết với id “Anchor” và href =”https://www.example.com” -

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

Sau đó, chúng tôi đã xác định hai kiểu cho thẻ liên kết để phân biệt khi nào nó được tập trung và đang hoạt động và khi nào thì không.

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

Sau đó, chúng tôi đã tạo hai nút “Lấy tiêu điểm” và “Mất tiêu điểm” để thực thi các hàm getfocus () và lostfocus () tương ứng.

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

Hàm getfocus () nhận phần tử có id “Anchor” được liên kết với nó mà trong trường hợp của chúng ta là phần tử . màu sẽ là xanh lục, văn bản sẽ được gạch dưới và kích thước phông chữ tăng lên 40px.

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

Hàm lostfocus () nhận phần tử có id “Anchor” được liên kết với nó, đây là phần tử trong trường hợp của chúng ta. Sau đó, nó thực thi phương thức mờ () của nó để mất tiêu điểm từ liên kết trên và thay đổi kiểu liên kết thành kiểu ban đầu cho phần tử .

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