空HTML5数据属性是否有效？

Question

空HTML5数据属性是否有效？

Ada*_*dam 111 html5 custom-data-attribute html5-data

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

Run Code Online (Sandbox Code Playgroud)

我只是想知道data-modal-target在上面的例子中是否有效,或者它是否必须data-modal-target="true"？我不关心比IE9等更糟糕的东西,我唯一的要求是它是有效的HTML5.

Answer 1

Llo*_*oyd 109

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

2.4.2布尔属性

元素上存在布尔属性表示真值,缺少属性表示false值.

这似乎是对规范的误解.您链接的部分描述了布尔属性,但没有说明自定义数据属性*是否*是布尔属性. (17认同)
我不知道省略值"将其变成"一个布尔属性 - 似乎布尔属性不是任意的; 我想有一个列表.也许它被浏览器/脚本视为布尔或自定义数据无关紧要; 但也许这取决于阅读它的脚本. (4认同)
太好了!感谢您的链接,我通常没有耐心通过w3.org :) (3认同)
看起来这不是真的`element.dataset.modalTarget`会产生空字符串,这是falsy(Chrome 32)与jQuery相同的结果 (3认同)
哦,我也不是 - 我碰巧知道这个经常使用HTML5音频元素,它使用布尔属性(`controls`) (2认同)
我相信这已经改变了.当然,我在我的代码中使用的示例不是被视为布尔值而是被视为空字符串.因此,测试`if($('p').data('modal-target'))`将不起作用:http://stackoverflow.com/questions/16864999/can-i-use-html5-data-属性 - 为 - 布尔属性. (2认同)

Answer 2

use*_*ser 43

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

可以通过仅提供属性名称来指定某些属性,而不使用任何值.

在以下示例中,disabled使用空属性语法给出属性:
<input disabled>
Run Code Online (Sandbox Code Playgroud)
请注意,空属性语法完全等同于将空字符串指定为属性的值,如以下示例所示.
<input disabled="">
Run Code Online (Sandbox Code Playgroud)

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

如果您通过element.dataset以下方式访问属性:

当存在空属性时,它的值为"".
当一个属性不存在时,你就会得到undefined.

因此,您不能只检查,if (element.dataset.myattr)因为它将永远false.

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

劳埃德的回答是不正确的.他提到了布尔属性microsyntax的链接,但data-*属性未在spec中指定为boolean.

归档时间：	13 年，5 月前
查看次数：	26908 次
最近记录：	9 年，3 月前