使用 DataSet API 设置数据属性

Question

以下是使用数据集 api.

从标签中获取数据属性的方法

<div data-color="red">Apple</div>

var color = document.querySelector('div').dataset.color

如何设置数据属性？
我可以创建新的数据属性吗？
它们会自动附加到元素吗？

请举例说明。

谢谢。

Answer 1

您可以设置data- attribute via the same dataset you mentioned or with Element.setAttribute()
是的，如下面的代码示例所示。您可以使用 dataset 或 setAttribute.
是的。 CSS 因此可以设计它们。请参阅我示例中的 div[data-price]:after 样式。

var div = document.querySelector('div');
var data = div.dataset;

div.innerHTML += ' was ' + data.color;

data.color = 'yellow';

div.innerHTML += '; now it is ' + data.color + '. <br/>';

data.type = 'Golden Delicious';

div.setAttribute('data-price', '.00');

div.innerHTML += 'This div has the following attribute/value pairs:';

for (var i = 0; i < div.attributes.length; i++) {
  var attr = div.attributes[i];
  div.innerHTML += '<br/>' + attr.name + '=' + attr.value;
}

div.innerHTML += '<br/>This div has the following dataset key/value pairs:';

for (var key in data) {
  div.innerHTML += '<br/>' + key + '=' + data[key];
}

div[data-color=red] {
  color: red;
}
div[data-color=yellow] {
  color: goldenrod;
}
div[data-price]:after {
  content: attr(data-price);
  color: green;
}

<div data-color="red">Apple</div>

使用 DataSet API 设置数据属性

Set Data Attribute using DataSet API

javascript

html

custom-data-attribute