Question

我想知道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>

Answer 1

没有。但...

与所有属性一样，在application/xhtml+xml序列化中，XML规则适用，属性必须具有显式名称和（带引号）值。

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

特别是在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 。

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

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

对于上述标记，

将评估为 true 。

Answer 2

元素属性的简单布尔测试

为了扩展Alohci的优秀答案，以下是一种简单，灵活的方法来测试使用以下三种标准HTML约定之一提供的true布尔属性值：<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' );

使用上面的代码，如果为false，则值为undefined或设置为f*, n*, 0（不区分大小写）之一，如果已定义并设置为true，则为(empty string), (attribute name), (anything else)其中一个：true。

空字符串在此处评估为''，因为没有值的HTML属性false等于JS中的<foo disabled/>（类似<foo disabled="true"/>应该等于!= null && a !== false ）。您可以通过删除{{1}}来使用上述代码进行更一般的字符串测试。