26

我遇到了 html 标签的两个奇怪属性. 它们是 "data-url"和"data-key"。

它们是什么以及如何使用它们？

由于某些原因，我无法显示我在其中找到它们的 HTML 文件的确切示例，但这里有一些来自网络的带有此类标签的示例：

  1. 数据键
  2. 数据键
  3. 数据网址

PS：我试过谷歌，但没有找到有用的结果。

4

4 回答 4

21

什么时候应该使用数据属性？

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合​​适的属性或元素。

这次使用 data 属性来表示通知气泡的气泡值。

<a href="#" class="pink" data-bubble="2">Profile</a>

此时间用于显示工具提示的文本。

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

什么时候不应该使用数据属性？

我们不应该将数据属性用于任何已经建立或更合适的属性。例如，不适合使用：

<span data-time="20:00">8pm<span>

当我们可以在如下的时间元素中使用已经定义的datetime属性时：

<time datetime="20:00">8pm</time>

通过 CSS 使用数据属性（属性选择器）

[data-role="page"] {
  /* Styles */
}

使用 jQuery 的数据属性 ( .attr() )

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

示例和信息来自这里

于 2013-08-14T09:23:22.557 回答
11

这些被称为HTML5 自定义数据属性。

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合​​适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。每个 HTML 元素都可以指定任意数量的自定义数据属性，并带有任意值。

您在 Google 中找不到它的原因是因为这些属性是用户为自己使用而生成的自定义属性。

从您的代码看来：

  • 编写此代码的人希望将一些附加信息与元素一起存储。不确定他是否也能处理好这件事 Javascript。

  • 你应该做的是Javascript完全检查代码，他是否正在处理这些数据属性，或者如果可能的话，与他一起检查。

  • 由于您的代码使用jQuery库，请检查.data() 方法。经过完整的代码审查后，如果您发现它没有用，请随意删除。
于 2013-08-14T09:11:49.497 回答
9

data-*属性用于向元素添加任意数据，以供在托管 HTML 的站点上运行的代码（通常是客户端 JavaScript）单独使用。

为了说明您给出的三个示例的用途，我们必须对它们附带的代码进行逆向工程（除非它们在网站上记录），因为它们没有标准含义。

于 2013-08-14T09:08:28.123 回答
2

HTML 5 中引入的一个新特性是添加了自定义数据属性。简单地说，自定义数据属性的规范规定，任何以“data-”开头的属性都将被视为私有数据的存储区域（私有的意思是最终用户看不到它——它不会影响布局或演示文稿）。这允许您编写有效的 HTML 标记（通过 HTML 5 验证器），同时在您的页面中嵌入数据。一个简单的例子：

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li>

于 2013-08-14T09:13:57.983 回答