介绍

在 JavaScript 中，dataset 属性是一个允许访问自定义的 data-* 属性的强大功能。这个属性可以在一个元素上存储任意数量的“数据属性”，并且这些属性可以轻松地通过使用数据属性的名称来访问。dataset 属性是一个 DOMStringMap 类型的键值对，其中包含元素的所有数据属性。

用法

获取数据属性的值

为了获取一个元素的数据属性的值，可以像使用对象的属性一样使用 dataset 属性。例如，假设有一个元素如下所示：

<div id="myDiv" data-foo="bar" data-baz="qux"></div>

你可以这样获取它的 data-foo 属性的值：

const myDiv = document.getElementById('myDiv');
const fooValue = myDiv.dataset.foo; // "bar"

设置数据属性的值

如果要设置一个元素的数据属性的值，可以像设置对象的属性一样使用 dataset 属性。例如：

const myDiv = document.getElementById('myDiv');
myDiv.dataset.foo = 'new value';

如果 data-foo 属性不存在，它将被创建。

删除数据属性

删除一个元素的数据属性，可以使用 delete 关键字：

const myDiv = document.getElementById('myDiv');
delete myDiv.dataset.foo;

总结

dataset 属性是一种强大的工具，可以让我们以一种方便的方式存储和访问自定义的数据属性。无论是要获取、设置还是删除元素的数据属性，都可以轻松地使用 dataset 属性。如果你在编写 JavaScript 代码时需要使用自定义数据属性，那么这是一个不错的选择。