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

5 votes159 views3 answers
Angular input onchange
Html
2 votes144 views3 answers
Ngfor in select
Html
0 vote163 views3 answers
Php warning: php startup: unable to load dynamic library 'bz2'
Html
2 votes206 views1 answer
Ion datetime interval 30 minutes
Html
5 votes144 views3 answers
Html a link tag
Html
78 votes140 views3 answers
Bootstrap change font color of text
Html
0 vote135 views1 answer
Class 'html' not found
Html
0 vote147 views1 answer
Print view fields in unformatted.html.twig drupal
Html
0 vote149 views1 answer
Change body font
Html
0 vote157 views1 answer
Angular to html converter
Html