带有以数据开头的属性的Html-

Question

我现在看到很多Html标签，其属性以数据开头，如下例所示。

<button type="button" class="btn" data-dismiss="modal" aria-hidden="true" ng-click="closeClippingModal();">Cancel</button>

我的问题就是这个。为什么要这样用？

Answer 1

这是一个html5属性，用于存储元数据或与元素相关的其他数据。它通常用于在JavaScript应用程序中存储状态。

您可以使用JQuery轻松访问它，如$("#myElement").data("dismiss");

Answer 2

最常见的用途是存储javascript的数据。例如，假设您有一张照片，并且您想要在网页上显示它，并且悬停效果是拍摄图像的位置和时间。存储与元素相关联的数据的最简单方法是在元素上使用data- *属性：

<img src="my/awesome/photo.jpg" data-location="Paris, France" data-datetime="30.3.2014 16:19:00" />

就这么简单。

Answer 3

data- *属性用于存储页面或应用程序专用的自定义数据，使我们能够在所有HTML元素上嵌入自定义数据属性。

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

data- *属性由两部分组成：

1. 属性名称不应包含任何大写字母，以及 前缀“data - ”
后必须至少有一个字符
2. 属性值可以是任何字符串

注意：用户代理将完全忽略以“data-”为前缀的自定义属性。

Answer 4

其中一个原因是存储数据而不是类。这是更加语义的方式。数据属性是HTML5更新。您还可以通过JS（数据集）和jQuery（data（）方法）轻松访问它们。有关更多信息，请参阅规范：http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

  

属性名称不应包含任何大写字母，并且必须至少在前缀“data - ”之后的一个字符

据我所知，data-attribut的名字可以包含大写字母，但这些字母将被强制转换为小写字母。

Answer 5

在John Resig’s blog中很好地描述了这个功能。

  

简单地说，自定义数据属性的规范说明了任何   以“data-”开头的属性将被视为存储区域   对于私人数据（在最终用户看不到它的意义上是私有的）    - 它不会影响布局或演示。）

     

这允许您编写有效的HTML标记（传递HTML 5   验证器）同时在页面中嵌入数据