To get the attribute values from a DOM element, you can use the getAttribute()
element method in JavaScript.
Let's say you have an h1
html tag with custom attribute data-color
like this,
<h1 data-color="red">Heading</h1>
Here, you can get the value of the data-color
attribute in the h1
tag using the getAttribute()
like this,
// first get the reference to h1 element
const h1 = document.querySelector("h1");
// get the data-color sttribute value
// using the getAttribute() method
const value = h1.getAttribute("data-color");
console.log(value); // red
- The method accepts a valid attribute name as an argument.
- The method returns the corresponding value for the attribute as a string if supplied a valid attribute name and
null
if not.
See live example in JSBin.