空的HTML5数据属性有效吗？

116

我想编写一个简单的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。

html custom-data-attribute html5-data

— 亚当
source

我找不到自定义数据属性在何处需要值；并且仍然不确定是否要忽略该值，或者只是为了安全起见就将其包括在内。W3C规范令人困惑（不足为奇）。我认为这可能取决于使用值的脚本。（由于长度限制，注释示例在下面继续）。

— 古德耶

例如，我使用的插件具有默认值的自定义数据属性：一些字符串，一些布尔值（导致我寻找此问题）。布尔数据混合使用默认值是true还是false。它正在检查它是否存在或具有值。它正在检查value是true还是空（对于true）还是false。但是对空的检查在代码中是明确的。它不是“内置”的。而且，它不会检查属性名称，就像布尔属性需要的那样，是data-abc =“ data-abc”一样；这会导致错误。

— 眼神

52

有效，但不是布尔值。

自定义数据属性规范未提及对空属性处理的任何更改，因此关于空属性的一般规则适用于以下情况：

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

在以下示例中，该disabled属性使用空属性语法给出：
<input disabled>
请注意，空属性语法完全等同于将空字符串指定为属性值，如以下示例所示。
<input disabled="">

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

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

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

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

— 用户
source

“请注意，空属性语法完全等同于将空字符串指定为属性值，如以下示例所示。” 正是我要寻找的。具体来说，jQuery的scriptAttrs设置不喜欢简单的defer值，但是a defer: ""应该可以解决问题。谢谢！

— sfarbota

112

是的，完全有效。在您的情况下，data-modal-target将表示一个布尔属性：

2.4.2布尔属性

元素上的布尔属性的存在表示真实值，而该属性的缺失表示错误值。

— 劳埃德
source

3

真好！感谢您的链接，我通常没有耐心去逛w3.org :)

— 亚当

4

我不知道省略值“将其转换为”布尔属性-似乎布尔属性不是任意的；我想有一个清单。也许浏览器/脚本将其视为布尔数据还是自定义数据都没有关系；但也许取决于脚本读取它。

— 眼神

3

我相信情况已经改变。当然，我在代码中使用的示例并未被视为布尔值，而是一个空字符串。因此，测试if ($('p').data('modal-target'))将无法进行：stackoverflow.com/questions/16864999/…。

— 德里克·亨德森

4

看起来像这样不正确，element.dataset.modalTarget将产生虚假的空字符串（Chrome 32）与jQuery相同的结果

— H1D 2014年

20

这似乎是对该规范的误解。链接到的部分描述了布尔属性，但没有说明自定义数据属性是否可以是布尔属性。

— BoltClock

1

是的，省略自定义数据属性的值是有效的语法。

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

空属性语法仅属性名称。该值隐式为空字符串。[...]“ https://developers.whatwg.org/syntax.html#attributes-0

— ew
source

1

一方面，它通过验证器16.5.7 https://validator.w3.org/nu/#textarea：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

另一方面，HTML5在data-属性说明中没有说它们是布尔值：https：//www.w3.org/TR/html5/dom.html#custom-data-attribute，而对于其他布尔值来说很清楚像https://www.w3.org/TR/html5/forms.html#attr-input-checked这样的属性checked

— Ciro Santilli郝海东冠状病六四事件法轮功
source