#    
## Overview

In this shot, we will learn how to use the HTML DOM **`blur()`** method. In HTML DOM, if an element is a **blur**, it is not active or focused. The `blur()` method is only used in the `<a>` tag, and the link becomes a `blur` after the method is called.

## Code

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<a id="myAnchor" href="https://www.google.com">GooGLE</a>

<input type="button" onclick="getfocus()" value="focus">
<input type="button" onclick="losefocus()" value="Blur">

<script>
function getfocus() {
  document.getElementById("myAnchor").focus();
}

function losefocus() {
  document.getElementById("myAnchor").blur();
}
</script>

</body>
</html>


a:focus, a:active {
  color: rgb(246, 0, 0);
}

codemirror

#    
## Code explanation

* In line 7, we define a `<a>` anchor tag for link `www.google.com` with the ID `myAnchor`, which we will use to get this element.

* In line 9, we have a button that will call the `getFocus()` method in JavaScript.

* In line 10, we have another button that will call the `loseFocus()` method.

* In line 13, we define the first function `getFocus()` so that the element is in focus.

* In line 17, we define the second function `loseFocus()` to make the element inactive, or blur the element with the `blur()` method.

Make sure to check the CSS file as well.

## Output

We click the `focus` button to make the link active (focus) and click the `Blur` button to blur the link.


What is the DOM blur() method in HTML?

The DOM `blur()` method in HTML is used to make elements inactive, primarily applied to the `<a>` tag.