空的 HTML5数据属性有效吗？

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

41414 次浏览
小开

是的，完全正确。在您的例子中，data-modal-target代表一个布尔属性:

2.4.2布尔属性

元素上布尔属性的存在表示 值，而该属性的缺少表示该值为假。

小开
最佳答案

有效，但它们不是布尔型的。

自定义数据属性规范 没有提到对空属性处理的任何更改，因此在这里应用 关于空属性的一般规则:

某些属性可以通过仅提供没有值的属性名来指定。

在下面的示例中，使用空属性语法给出了 disabled属性:

<input disabled>

注意，空属性语法与将空字符串指定为属性的值完全等效，如下面的示例所示。

<input disabled="">

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

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

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

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

小开

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

”属性可以用四种不同的方式指定:

空属性语法 只有属性名称。值是隐式的空字符串。 [...]" Https://developers.whatwg.org/syntax.html#attributes-0

小开

一方面，它通过了验证器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) ，它说得非常清楚


提交答案