空 HTML5 数据属性是否有效？答案

【问题标题】：Are empty HTML5 data attributes valid?空 HTML5 数据属性是否有效？
【发布时间】：2012-04-01 12:18:36
【问题描述】：

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

【问题讨论】：

我找不到自定义数据属性是否需要值；并且我仍然不确定是否要省略该值，或者只是为了安全而将其包含在内。 W3C 规范令人困惑（不足为奇）。我认为这可能取决于使用这些值的脚本。（由于长度限制，评论示例在下面继续）。
例如，我使用的插件具有自定义数据属性和默认值：一些字符串，一些布尔值（引导我寻找这个问题）。布尔数据混合了默认值是真还是假；它正在检查它是否存在或具有值。它正在检查值是真还是空（对于真）或假。但是对空的检查在代码中是明确的；它不是“内置的”。而且，它不会检查属性名称，例如 boolean 属性需要的 data-abc="data-abc" ；这会导致错误。

标签： html custom-data-attribute html5-data

【解决方案1】：

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

2.4.2 Boolean attributes

元素上存在布尔属性表示真实值，属性不存在代表假值。

【讨论】：

不错！感谢您的链接，我通常没有耐心浏览 w3.org :)
我不知道省略值“将其转换为”布尔属性 - 布尔属性似乎不是任意的；我想有一个他们的名单。也许浏览器/脚本将其视为布尔数据或自定义数据并不重要；但也许这取决于阅读它的脚本。
我相信这已经改变了。当然，我在代码中使用的示例并未被视为布尔值，而是被视为空字符串。因此，测试if ($('p').data('modal-target')) 将不起作用：stackoverflow.com/questions/16864999/…。
看起来这不是真的element.dataset.modalTarget 会产生空字符串，这是假的（Chrome 32）与 jQuery 的结果相同
这似乎是对规范的误解。您链接到的部分描述了布尔属性，但没有说明自定义数据属性是否可以是布尔属性。

【解决方案2】：

有效，但它们不是布尔值。

Custom data attributes specification 没有提及对空属性处理的任何更改，因此general rules about empty attributes 在这里适用：

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

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

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

当您访问一个空属性时，它的值为""。因为它是一个假值，所以不能只使用if (element.dataset.myattr) 来检查属性是否存在。

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

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

【讨论】：

"请注意，空属性语法与将空字符串指定为属性值完全相同，如下例所示。"正是我正在寻找的。具体来说，jQuery 的 scriptAttrs 设置不喜欢普通的 defer 值，但 defer: "" 应该可以解决问题。谢谢！
如果您想在 HTMLElement 上获取布尔属性，您可以使用 hasAttribute 定义自定义 getter。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案3】：

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

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

空属性语法只是属性名称。该值隐含地是空字符串。 [...]” https://developers.whatwg.org/syntax.html#attributes-0

【讨论】：

它还在“属性有名称和值”之前说。它没有说“属性有一个名称和一个可选值。”

【解决方案4】：

一方面，它通过了验证器 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，而对于其他布尔属性，例如 checked https://www.w3.org/TR/html5/forms.html#attr-input-checked，它说得很清楚

【讨论】：