javascript – 做html5数据属性需要一个值？

这个问题在这里已经有一个答案：> Are empty HTML5 data attributes valid?4个
我想知道html数据属性是否真的需要一个值来应用？

我想知道这一点,因为我们常常想知道的是,如果该属性实际上被设置为一个标志. (确实我们可以为此使用一个类;但是实际上除非你要对这些项进行不同的样式,否则标志是比语义项更多的数据).

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

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

我知道在谷歌chrome这是足够的锚点显示为

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

但是到处都会这样吗？并且它甚至是有效的HTML5(我相信是由于自动对焦,自动播放等属性).或者我们需要：

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

解决方法

不是,但…

与所有属性一样,在application / xhtml xml序列化中,XML规则适用,属性必须具有明确的名称和(引用)值.

所以这个问题真的是关于text / html序列化的,所以HTML5规范的相关部分是Section 8 The HTML syntax

特别是在attributes年以前,它说：

Attributes can be specified in four different ways:

其中第一个是：

Empty attribute Syntax

Just the attribute name. The value is implicitly the empty string.

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

例如,使用< input id =“cb”type =“checkBox”checked&gt,“checked”属性由true或false的属性反映出来.所以

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

将评估为真的上述标记.

相反,使用< input id =“cb”type =“checkBox”data-checked&gt,“data-checked”属性通过数据集对象作为字符串反映.此属性的值为空字符串,其中JavaScript为false.所以,

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

将评估为以上标记为假.

要进行等效测试,请比较“not undefined”的值.即

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

将评估为真的上述标记.

见http://jsfiddle.net/GAxvW/