- 4 years ago
- Zaid Bin Khalid
- 13231 Views
-
4
In this session, you will learn how to get, set, and remove attributes from HTML elements in JavaScript with the help of an example.
Working with Attributes
In JavaScript, you can use special or unique words inside the start tag of HTML elements. These words termed as Attributes. Attributes help to control HTML elements to control the tagging behavior or provides additional information about the tag. JavaScript help or provides several ways for adding, removing, or changing an HTML element’s attribute.
Attributes method:
There are several different methods of attributes are mention below:
- Getting Element’s Attribute Value
- Setting Attributes on Elements
- Removing Attributes from Elements
Getting Element’s Attribute Value
The method is used to get the current value of the attribute on the element is called getAttribute( ).
If the element does not exist in a specified attribute, it will return or show null. As shown in the example:
<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>
<script>
// Selecting the element by ID attribute
var link = document.getElementById("myLink");
// Getting the attributes values
var href = link.getAttribute("href");
alert(href); // Outputs: https://www.google.com/
var target = link.getAttribute("target");
alert(target); // Outputs: _blank
</script><a href="https://www.google.com/" target="_blank" id="myLink">Google</a>
Setting Attributes on Elements
setAttribute ( ) is the method use to set an attribute on the specified or unique element.
if the attribute already exists on the element, the value will be updated.
You can also add new attribute in the element with unique name and value.
In the following example, the JavaScript will add a class and a disabled attribute code to the <button> element.
<button type="button" id="myBtn">Click Me</button>
<script>
// Selecting the element
var btn = document.getElementById("myBtn");
// Setting new attributes
btn.setAttribute("class", "click-btn");
btn.setAttribute("disabled", "");
</script>
With the setAttribute( ) method we can update or change the value of an existing attribute on an HTML element. In the following example, the JavaScript code will update the value of the existing href attribute of an (<a>) anchor element.
<a href="#" id="myLink">Tutorial Republic</a>
<script>
// Selecting the element
var link = document.getElementById("myLink");
// Changing the href attribute value
link.setAttribute("href", "https://www.tutorialrepublic.com");
</script>
Removing Attributes from Elements
The method use to remove an attribute from the specified or unique element called removeAttribute ( ).
As you can see, the stated below example of JavaScript code that will remove the href attribute from an anchor element.
<a href="https://www.google.com/" id="myLink">Google</a>
<script>
// Selecting the element
var link = document.getElementById("myLink");
// Removing the href attribute
link.removeAttribute("href");
</script>
- 4 years ago
- Zaid Bin Khalid
- 13231 Views
-
4