使用js在div上设置数据属性

Question

我有一堆div.textBox，我想将数据属性应用到它。

这就是我想要的结果：

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

我试过了：

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

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

帮助！

Answer 1

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

Answer 2

setAttribute在所有浏览器中都不起作用。 http://www.w3schools.com/jsref/met_document_createattribute.asp有一个肯定会运作良好的例子。

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

Answer 3

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

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

Answer 4

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

  

$（'＃id_of_element'）。attr（'data-id'，'your_value'）;

它将对div呈现如下：

HTTP trigger