DOM - Attribute

attributes representation in the DOM.

Node attributes are not included as children in the DOM hierarchy but are properties of an element.

• The HTML with the style attribute that we want to change

<p>My sweat suit is <span style="color: green">green</span> </p>

• Select the P element

spanElement = document.querySelector('body>p>span');

• Get the attribute value

style = spanElement.getAttribute ('style');
console.log("The style attribute has the value: ("+style + ")");

• Result:

• https://api.jquery.com/attr/

• The library

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

• The HTML with the data-attr to get the value from

<span data-attr="You got me"></span>

• The code that outputs the value of the data-attr

let attrValue = $('span').attr('data-attr');
console.log('The value of the data-attr attribute is : '+attrValue);

• Result:

• The HTML with the style attribute that we want to change

<p>My sweat suit is <span style="color: green">green</span> </p>

• Select the P element

spanElement = document.querySelector('body>p>span');

• Set the attribute to the color red

spanElement.setAttribute ('style','color:red');

• Result:

• You can check the DOM HTML with the devtool

With element.removeAttribute(attrName).

Demo:

• A button with a style attribute that will be deleted when we click on it

<button style="color:white;background:steelblue">Delete my style</button>

• The javascript that select the first button and add a click event listener callback that remove the attribute on the target

document.querySelector('button').addEventListener("click", function (event) { 
    event.target.removeAttribute("style"); 
});

• Click on the button to delete its style attribute

With JQuery, you would use removeAttr