13

我想知道html数据属性是否真的需要一个值来应用？

我想知道这一点，因为我们通常只想知道该属性是否实际设置为充当标志。（当然我们可以为此使用一个类；但实际上，除非您要对这些项目进行不同的样式设置，否则标志是比语义项目更多的数据）。

一个完美的例子是如果我们想要一个链接滚动到它的目标而不是跳转我们的 jQuery 代码可能看起来像：

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

我知道在谷歌浏览器中，锚点显示为

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

但这会在任何地方都有效吗？它甚至是有效的 HTML5（我相信这是由于自动对焦、自动​​播放等属性）。还是我们需要：

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>
4

2 回答 2

17

不是，但...

与所有属性一样，在application/xhtml+xml序列化中，应用 XML 规则并且属性必须具有明确的名称和（引用的）值。

所以这个问题实际上是关于text/html序列化的，因此 HTML5 规范的相关部分是第 8 节 HTML 语法

特别是，在attributes下，它说：

可以通过四种不同的方式指定属性：

其中第一个是：

空属性语法

   只是属性名称。该值隐含地是空字符串。

有必要了解该值是字符串类型，而不是布尔类型。

例如，使用<input id="cb" type="checkbox" checked>时，“checked”属性反映为 true 或 false 的属性。所以

if (document.getElementById("cb").checked)

对于上述标记，将评估为true 。

相比之下，<input id="cb" type="checkbox" data-checked>“数据检查”属性通过数据集对象反映为字符串。此属性的值是空字符串，在 JavaScript 中是错误的。所以，

if (document.getElementById("cb").dataset.checked)

对于上述标记，将评估为false 。

要进行等效测试，请比较“未定义”的值。IE

if (document.getElementById("cb").dataset.checked !== undefined)

对于上述标记，将评估为true 。

见http://jsfiddle.net/GAxvW/

于 2013-07-26T09:08:14.157 回答
2

元素属性的简单布尔测试

为了扩展 Alohci 的出色答案，以下是一种简单、灵活的方法来测试true使用三种标准 HTML 约定之一提供的布尔属性值：<foo data-bar/>、、<foo data-bar="true"/>或<foo data-bar="data-bar"/>。

var a = elem['data-bar'];
var aTrue = ( a != null && a !== false && a !== 0 && a.charAt(0) != 'f' &&
              a.charAt(0) != 'n' );

使用上面的代码，该值是falseifundefined或设置为以下之一：（f*, n*, 0不区分大小写），true如果定义并设置为以下之一：(empty string), (attribute name), (anything else)。

空字符串在true这里被评估，因为没有值的 HTML 属性在 JS 中是''相等false的（和类似的东西<foo disabled/>应该相等<foo disabled="true"/>）。您可以通过删除上面的代码来进行更一般的字符串测试!= null && a !== false。

于 2014-12-02T21:04:11.123 回答