我想知道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>,“checked”属性由true或false的属性反映出来.所以
if (document.getElementById("cb").checked)
将评估为真的上述标记.
相反,使用< input id =“cb”type =“checkBox”data-checked>,“data-checked”属性通过数据集对象作为字符串反映.此属性的值为空字符串,其中JavaScript为false.所以,
if (document.getElementById("cb").dataset.checked)
将评估为以上标记为假.
要进行等效测试,请比较“not undefined”的值.即
if (document.getElementById("cb").dataset.checked !== undefined)
将评估为真的上述标记.