为什么在 html5 中使用数据星 (data-*) 属性？ [复制]答案

【问题标题】：Why use data star (data-*) attribute in html5? [duplicate]为什么在 html5 中使用数据星 (data-*) 属性？ [复制]
【发布时间】：2018-05-04 05:42:31
【问题描述】：

我正在浏览 HTML5，我发现 data-* 属性是 HTML5 的新属性。但我不明白它的重要性。根据其definition from w3schools 我理解：

data-* 属性用于存储页面或应用程序私有的自定义数据。

问题：自定义数据是什么意思？我们如何使用 data-* 来存储自定义数据？

data-* 属性使我们能够在所有 HTML 元素中嵌入自定义数据属性。

然后可以在页面的 JavaScript 中使用存储的（自定义）数据来创建更具吸引力的用户体验（无需任何 Ajax 调用或服务器端数据库查询）。

问题：我们已经可以为元素添加属性并在 JavaScript 中使用，那为什么还要使用 data-* 属性呢？

【问题讨论】：

例如，如果您想将id 存储到div，您可以输入data-someid="1" 之类的内容，然后使用（在JQuery 中） var someId = $("div").data('someid')
所以好处是我可以将任何东西作为属性名并在 javaScript 中使用。
我链接的问题有些陈旧，但我认为它给出了一个很好的答案。请注意，上面的答案提到的 DOM API 是 dataset，这在大多数浏览器中确实可用。

标签： javascript html html-dataset

【解决方案1】：

您可以使用 data-* 进行更好、最灵活的组织。一个实际的例子是这样的：

$("#result").text( $("#player").data("age") + " years old, " +
"Actual Team: "+$("#player").data("team") );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

</script>
<!-- For Example, multiple data in a single div-->
<div data-age="33" data-team="Real Madrid" id="player">
       Cristiano Ronaldo profile: <span id="result"></span>
</div>

【讨论】：