一尘不染

空的HTML5数据属性有效吗?

html

我想编写一个简单的jQuery插件,在指定元素下显示内联模式。我的想法是让脚本根据元素上指定的数据属性自动初始化。

一个非常基本的例子:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

我只是想知道data-modal-target上面的示例中是否有效,还是必须这样做data-modal- target="true"?我不在乎什么比IE9更糟糕的东西,我唯一的要求就是它是有效的HTML5。


阅读 328

收藏
2020-05-10

共1个答案

一尘不染

有效,但不是布尔值。

自定义数据属性规范未提及对空属性处理的任何更改,因此关于空属性一般规则适用于此:

可以通过仅提供属性名称而不提供值来指定某些属性。

在以下示例中,该disabled属性使用空属性语法给出:

<input disabled>

请注意,空属性语法完全等同于将空字符串指定为属性的值,如以下示例所示。

<input disabled="">

因此,允许您使用空的自定义数据属性,但是需要特殊处理才能将它们用作布尔值。

当您访问空属性时,其值为""。由于这是一个伪造的值,因此您不能仅使用它if (element.dataset.myattr)来检查属性是否存在。

您应该使用element.hasAttribute('myattr')if (element.dataset.myattr !== undefined)代替。


劳埃德的答案是错误的。他提到了指向布尔属性微语法的链接,但是data-*在规范中未将属性指定为布尔值。

2020-05-10