怎么使用H5的dataset

什么是H5的dataset？

H5的dataset是指HTML5中新增的一种属性，它可以在DOM元素上存储自定义数据，且不需要添加任何自定义属性，可方便开发者存储一些跟该元素相关联的数据。例如，我们可以用dataset在一个DOM元素上存储用户ID，不需要设置一个名为userID的属性来存储。dataset属性可以用于HTML5文档中的任何标签，并且可以用JavaScript来调用和修改这些属性。

如何使用dataset？

要使用dataset，我们只需在HTML标记中添加data-前缀，并在这个前缀后面跟上任意名称。然后我们就可以在JavaScript代码中使用dataset来访问这些元素的dataset属性。

    <div id="myDiv" data-userID="123456">…</div>
    var divEl=document.getElementById('myDiv');
    var userID=divEl.dataset.userID;
    

如何修改dataset？

我们可以使用dataset来访问元素的属性并进行更改。例如，如果要更改上面data-userID属性的值，我们可以使用以下代码：

    divEl.dataset.userID='7890';
    

如何在CSS中使用dataset？

我们可以用CSS选择器来选取具有特定dataset属性的元素。例如，我们可以使用以下代码将颜色为红色的背景应用于所有具有data-category="product"的元素：

    [data-category="product"] {
      background-color:red;
    }
    

总结

H5的dataset属性为开发者提供了一种在DOM元素上存储自定义数据的简单方法。通过在HTML标记中添加data-前缀，我们可以轻松地为元素指定自定义数据属性。使用JavaScript代码，我们可以访问和修改这些属性值。CSS选择器可以使用具有特定dataset属性的元素来应用样式。