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 vote338 views1 answer
Show html string in p tag
Html
0 vote321 views1 answer
Footer html stack overflow
Html
0 vote318 views1 answer
How to get a adminitration password for filezilla server
Html
0 vote334 views1 answer
Attribute syntax
Html
12 votes325 views2 answers
Bootstrap grids examples
Html
8 votes293 views2 answers
Base64 image html example
Html
0 vote320 views1 answer
An error occurred while retrieving token. DOMException: Registration failed - push service error
Html
2 votes371 views6 answers
Django template truncate html
Html
1 vote333 views1 answer
Html a tag underline none
Html
0 vote343 views2 answers
Reveal CSS Animations
Html