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
– MCL, Commented Feb 13, 2013 at 18:09
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
– QuentinUK, Commented Feb 13, 2013 at 18:15

marekful · Accepted Answer · 2021-11-17 12:41:35Z

16

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, 2021 at 12:41

answered Feb 13, 2013 at 18:17

marekful

15.4k6 gold badges39 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marteljn · Accepted Answer · 2013-02-13 18:12:33Z

2

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";
}

answered Feb 13, 2013 at 18:12

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Comments

Gangula · Accepted Answer · 2024-06-26 11:05:47Z

2

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);

<div id="mydivid">Javascript is going to set data-attribute for this DIV</div>

edited Jun 26, 2024 at 11:05

Gangula

7,7805 gold badges53 silver badges95 bronze badges

answered Feb 13, 2013 at 18:24

TheBrain

5,6202 gold badges27 silver badges26 bronze badges

Comments

Harry .Naeem · Accepted Answer · 2019-04-25 07:39:56Z

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, 2019 at 7:39

Harry .Naeem

1,3313 gold badges21 silver badges37 bronze badges

1 Comment

Michael Livach Over a year ago

it will not work with pure Javascript. It requires jQuery

Collectives™ on Stack Overflow

Set data attribute on div with js

4 Answers 4

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Linked

Related