139

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

4

4 回答 4

113

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

2.4.2 布尔属性

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

于 2012-03-15T22:28:41.970 回答
76

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

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

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

在以下示例中，disabled属性使用空属性语法给出：

<input disabled>

请注意，空属性语法与将空字符串指定为属性值完全相同，如下例所示。

<input disabled="">

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

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

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

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

于 2014-05-20T06:14:36.677 回答
1

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

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

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

于 2015-04-22T09:39:20.157 回答
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

于 2016-05-15T16:26:54.603 回答