Question

我正在浏览HTML5，我发现data- *属性是HTML5的新功能。但我并不了解它的重要性。据我所知definition from w3schools：

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

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

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


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

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

Answer 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>

为什么在html5中使用数据星（data- *）属性？

1 个答案: