logo标签列表

"data-" 在 a 标签或 div 标签中有什么作用？

javascripthtml
3

我一直在研究一些API和插件，看到了一些长这样的插件：

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-send="true" data-width="450" data-show-faces="true"></div>

或者
<a class="bistri-button" data-key="871b7d8f839e9cdbfc6dcc87b6932889feae334d8fbc2862"></a>

dat-key或data-send代表什么？如何使用它们？它们是向处理请求的JavaScript文件发送数据的一种方式吗？那么，如何在JavaScript文件中处理它们？

2
除非您访问或使用它，否则它不会有任何作用。它只是一种在 HTML 中存储数据的方式，这种方式不会使您的 HTML 失效，同时可能具有描述性/表现力。 - Kevin B
6个回答
2

data-* 属性是 HTML-5 自定义属性

非 默认属性名 的名称可以通过在前面添加 data- 使得 HTML 有效。

它们可以通过以下方式之一检索：

$('.fb-like').attr('data-key')

或者

$('.fb-like').data('key') // This is more appropriate
我认为在不提及其名称的情况下使用专门的JavaScript库是不适当的。这也与原始的HTML中心问题无关。 - Sven
“专用的 JavaScript 库” 是什么意思？我只是在指 HTML。 - Sushanth --
$ 肯定不是 HTML。 - Sven
啊哈..我明白了..你在提到jQuery..OP已经标记了问题为jQuery..所以我没有特别提到它。 - Sushanth --
感谢您提供的指针 - 已修复。 - Sven
2

这只是一个属性。与在元素上设置任意属性不同，它们添加了 data-*。它们可以包含任何你想要的内容，没有特殊的继承意义。

在 jQuery 中，可以使用 .data() 访问它们：

$('.fb-like').data('href')
1
哦，太棒了！那么如果它被设置为数据键，使用jQuery我可以通过执行$('.fb-like').data('key')来访问该值吗？ - Michael Nana
@MichaelNana：是的 :-) - gen_Eric
1

数据是向HTML标签添加自定义属性的好方法。

您还可以使用jQuery函数.data()访问它们。

$(element).data('key');//Will get the value of data-key
0

data-* 属性是一种将一些信息附加到 HTML 元素的方式。

它不会直接影响元素的行为，也没有任何作用。但是，它提供了符合标准的方式来将一些数据分配给元素。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接