Custom data attributes html

Js get data attribute

var element = document.querySelector('.element');
var dataAttribute = element.getAttribute('data-name');
// replace "data-name" with your data attribute name

console.log(dataAttribute);

Javascript get data attribute value

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Source: developer.mozilla.org

Custom data attributes html

<div data-myvar="hello world"</div>
<script>
 //Note: attribute in html will force lowercase, make sure all letters are lower
  var element = document.querySelector("div");
  console.log(element.dataset.myvar);
  //outputs: hello world
</script>

Similar codes

0 vote231 views2 answers
Working with multiple html forms django
Html
0 vote198 views3 answers
How to set all to left on html
Html
2 votes199 views1 answer
Etag header
Html
0 vote182 views1 answer
Font awesome animate
Html
0 vote218 views1 answer
How to use figure and caption in html
Html
1 vote202 views1 answer
Middel click vuejs
Html
2 votes169 views1 answer
Vue router link dynamic id
Html
68 votes201 views5 answers
How to add a image file in html
Html
230 votes510 views6 answers
How to connect a javascript file to html
Html
10 votes175 views6 answers
Bootstrap 5 tab
Html