用js在div上设置数据属性答案

【问题标题】：Set data attribute on div with js用js在div上设置数据属性
【发布时间】：2013-01-29 09:14:47
【问题描述】：

我有一堆 div.textBox，我想对其应用数据属性。

这就是我想要的结果：

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

我试过了：

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

但它不起作用......

救命！

【问题讨论】：

试试element.setAttribute('data-stellar-ratio', 'something');
这应该会有所帮助：stackoverflow.com/questions/710275/…
应该是.dataset.stellarRatio = '2';
不是getElementsByClassName吗？
在jQuery的帮助下操作DOM要容易得多，$(".text").attr('data-stellar-ratio', '2');但我不确定你是否想要一个带有 jQuery 的答案。

【解决方案1】：

作为documented

Document 接口的getElementsByClassName 方法返回一个具有所有给定的所有子元素的类数组对象类名。

更准确地说，NodeList 被返回并且可以作为数组访问。选择器找到的第一个元素通过索引 0 访问。

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

【讨论】：

【解决方案2】：

您可以使用以下语句将 data 属性添加到 html 中的任何元素：

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

对于一个 div，它将呈现如下：

<div data-id="your_value">

【讨论】：

【解决方案3】：

setAttribute 并不适用于所有浏览器。 http://www.w3schools.com/jsref/met_document_createattribute.asp 有一个例子，肯定会很好用。

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

【讨论】：

【解决方案4】：

您拼写错误getElementsByClassName，您需要遍历元素集合并将stellar.ration 更改为stellarRatio。

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

【讨论】：