How To Set Attribute In Js

JavaScript setAttribute()

The setAttribute() method is used to set or add an attribute to a particular element and provides a value to it. If the aspect already exists, it but ready or changes the value of the attribute. So, we can also utilise the setAttribute() method to update the existing attribute's value. If the corresponding attribute does not exist, it will create a new attribute with the specified proper name and value. This method does not return whatever value. The aspect name automatically converts into lowercase when we use it on an HTML chemical element.

Although we tin add together the style attribute using the setAttribute() method, merely it is recommended not to utilize this method for styling. For adding styles, nosotros can use the properties of the fashion object that volition effectively change the style. Information technology can be clear with the following code.

Incorrect way

It is recommended non to use it to modify the way.

Right style

The correct way to change the mode is given beneath.

To go the value of an attribute, we can use the getAttribute() method, and to remove a specific attribute from an chemical element, we tin can use the removeAtrribute() method.

If we are adding a Boolean aspect such as disabled , then whatever the value it has, it is always considered as true . If we require to prepare the value of the Boolean attribute to false , we accept to remove the entire attribute using the removeAttribute() method.

Syntax

The arguments of this method are not optional. Both parameters must be included when using this method. The parameter values of this method are defined as follows.

Parameter Values

attributeName: Information technology is the name of the attribute that nosotros want to add to an element. It cannot be left empty; i.e., it is not optional.

attributeValue: It is the value of the attribute that nosotros are adding to an element. It is besides non an optional value.

Permit's sympathise how to apply setAttribute() method past using some illustrations.

Example1

In this example, we are adding a href attribute with a value of "https://www.javatpoint.com/" to the <a> tag with id = "link".

Test it Now

Output

After the execution of the higher up code, the output will exist -

Nosotros tin see that before clicking the given button, the link is non created. Later on clicking the button, the output will be -

Now, we tin can see that the link is created.

Example2

In this example we are updating the value of a existing aspect using the setAttribute() method. Hither, we are converting a textfield to a button by irresolute the value of type aspect from text to button.

We take to click the specified button to run across the upshot.

Examination it Now

Output

After the execution of the above lawmaking, the output will be -

After clicking the button, the output volition be -

Example3

Here, we are adding a Boolean attribute disabled to disable the specified button. If we prepare the value of the disabled attribute to an empty string, then it is automatically sets to truthful which causes the push to be disabled.

Test information technology Now

Output

Subsequently the execution of the above code, the output will be -