javascript - 用js在div上设置数据属性

Question

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

这就是我想要的结果：

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

我试过了：

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

但它不工作...

帮助！

score 13 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

它将为 div 呈现如下：

<div data-id="your_value">

4 回答 4