Answers for "data attributes html"

12

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);
Posted by: Guest on February-03-2020
1

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>
Posted by: Guest on October-08-2021
5

html javascript find data attribute

//javascript get html data attribute
<button data-id="1" >Click</button>
<button data-id="2" >Click</button>
<button data-id="3" >Click</button>
const btns=document.querySelectorAll('button[data-id]');
[...btns].forEach(btn => console.log(btn.getAttribute('data-id')))
Posted by: Guest on July-25-2020
1

html javascript data attributes

/* index.html
<div
  id="test-div"
  data-first-name="Tom"
  data-last-name="Mot"
  data-active
></div>
*/

// Reading
const div = document.getElementById("test-div");
console.log(div.dataset);
/*
{
  active: ""
  firstName: "Tom"
  lastName: "Mot"
}
*/

// Writing
const div = document.getElementById("test-div");
div.dataset.test = "Hello World!";
console.log(div.dataset.test); // Hello World
Posted by: Guest on July-10-2021
5

javascript get data attribute value

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Posted by: Guest on April-15-2020
0

html data attribute

<a data-color="blue">
  	This tag contains a user-defined color attribute
</a>

<div data-link="https://github.com/k-vernooy">
	This tag contains a data attribute with a link
</div>
Posted by: Guest on February-22-2020

Code answers related to "Javascript"

Browse Popular Code Answers by Language