Question

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

Answer 1

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

2.4.2 Boolean attributes

元素上存在布尔属性表示true   value，缺少属性表示false值。

Answer 2

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

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

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

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

如果您通过element.dataset访问属性：

当存在空属性时，它的值为""。
当缺少某个属性时，您将获得undefined。

因此，您无法选中if (element.dataset.myattr)，因为它始终为false。

您可以而且应该将布尔属性检查为if (element.dataset.myattr !== undefined)。

劳埃德的回答是不正确的。他提到了布尔属性microsyntax的链接，但data-*属性未在规范中指定为布尔值。

Answer 3

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

＆＃34;属性可以用四种不同的方式指定：

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

Answer 4

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

JLabel

另一方面，HTML5在<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>a</title> </head> <body data-asdf> </body> </html>属性的规范中没有说它们是布尔值：https://www.w3.org/TR/html5/dom.html#custom-data-attribute，而对于其他布尔属性，如data- {{3 }}

空HTML5数据属性是否有效？

4 个答案:

2.4.2 Boolean attributes