什么是“数据网址"?和“数据密钥"<a>的属性标签? [英] What are "data-url" and "data-key" attributes of <a> tag?

问题描述

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

I've faced two strange attributes of an html tag . They are "data-url" and "data-key".

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

What are they and how can they be used?

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

For some reasons i can't show the exact example of the HTML file I've found them in, but here are some examples from the web with such tags:

1. 数据键
2. 数据键
3. data-url

1. data-key
2. data-key
3. data-url

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

PS: I've tried to Google, but no useful results were found.

推荐答案

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

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

这次用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);
 });

来自 这里

这篇关于什么是“数据网址"?和“数据密钥"<a>的属性标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！