Set data attribute on div with js

Question

I've got a bunch of div.textBox that I want to apply data attribute to it.

Here's what I want to end up with :

<div class="text" data-stellar-ratio="2">

I've tried :

document.getElementByClassName('text').dataset.stellar.ratio = "2";

But it's not working...

Help!

Try `element.setAttribute('data-stellar-ratio', 'something');` — MCL, Feb 13 '13 at 18:09
This should help: http://stackoverflow.com/questions/710275/how-to-add-update-an-attribute-to-an-html-element-using-javascript — tymeJV, Feb 13 '13 at 18:10
It is a lot easier to manipulate the DOM with the help of jQuery, $(".text").attr('data-stellar-ratio', '2'); But I'm not sure that you want an answer with jQuery in it. — QuentinUK, Feb 13 '13 at 18:15
`document.getElementsByClassName('text').dataset.stellarRatio = "2";` did not work. Though it worked with `getElementById` . — PMaly, Feb 13 '13 at 18:23

marekful · Accepted Answer · 2021-11-17T12:41:35.320

13

As documented

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).

More precisely, a NodeList is returned and can be accessed as an array. The first element the selector finds is accessed via index 0.

document.getElementsByClassName('text')[0].setAttribute('data-stellar-ratio', '2')

edited Nov 17 '21 at 12:41

answered Feb 13 '13 at 18:17

marekful

14,178
5
35
56

score 1 · Answer 2 · answered Feb 13 '13 at 18:12

You spelled getElementsByClassName wrong and you need to iterate over the collection of elements and change stellar.ration to stellarRatio.

var eles = document.getElementsByClassName('text');
for (var x = 0; x < eles.length; x++){
  eles[x].dataset.stellarRatio = "2";
}

score 1 · Answer 3 · answered Feb 13 '13 at 18:24

setAttribute doesn't quite work in all browsers. http://www.w3schools.com/jsref/met_document_createattribute.asp has an example that will certainly work well.

var att=document.createAttribute("whatever");
att.value="someting";
document.getElementById('mydivid').setAttributeNode(att);

score 1 · Answer 4 · answered Apr 25 '19 at 07:39

1

You can add data attribute to any element in html using the following statement:

$('#id_of_element').attr('data-id', 'your_value');

It will render as follows for a div:

<div data-id="your_value">

answered Apr 25 '19 at 07:39

Harry .Naeem

1,135
3
18
31

Set data attribute on div with js

4 Answers4