Reading Time: 5 minutes

1,287 Views

Inside this article we will see the concept i.e Javascript Get Set and Remove Element Attribute Example Tutorial. Article contains the classified information about How to get, set, and remove attributes and properties of an element using javascript HTML DOM.

If you are looking for a solution i.e working to get, set and remove attributes of HTML DOM Element in Javascript then this article will help you a lot for this. Tutorial is super easy to understand and implement it in your code as well.

The attributes are special words used inside the start tag of an HTML element to control the tag’s behavior or provides additional information about the tag.

JavaScript provides several methods for adding, removing or changing an HTML element’s attribute. In the following tutorial we will learn about these methods in detail.

Learn More –

Let’s get started.

Getting Element’s Attribute Value

Here,

We will use the concept of Javascript i.e JavaScript getAttribute() Method.

The getAttribute() method is used to get the current value of an attribute on the element.

If the specified attribute does not exist on the element, it will return null.

//...

<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>
  
//...

In the above example we can see we read the attributes of anchor tag like href and target. We are getting element’s attribute values by the reference of it’s ID.

Setting Attributes on Elements

Here,

We will use the concept of Javascript i.e JavaScript setAttribute() Method.

The setAttribute() method is used to set an attribute on the specified element.

If the attribute already exists on the element, the value is updated; otherwise a new attribute is added with the specified name and value.

//...

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

//...

The JavaScript code in the following example will add a class and a disabled attribute to the <button> element.

Similarly, we can use the same method setAttribute() method to update or change the value of an existing attribute on an HTML element.

//...

<a href="#" id="myLink">Online Web Tutor</a>

<script>
    // Selecting the element
    var link = document.getElementById("myLink");
	
    // Changing the href attribute value
    link.setAttribute("href", "https://onlinewebtutorblog.com/");
</script>

//...

Removing Attributes from Elements

Here,

We will use the concept of Javascript i.e JavaScript removeAttribute() Method.

The removeAttribute() method is used to remove an attribute from the specified element.

The JavaScript code in the following example 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>

//...

We hope this article helped you to learn Javascript Get Set and Remove Element Attribute Example Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.