我可以使用HTML5 data- *属性作为布尔属性吗?

时间:2013-05-31 20:00:30

标签: html html5 custom-data-attribute

我想使用自定义布尔属性将元素的内容标记为可编辑。我知道data-*属性,但不确定它们是否需要值。我不需要data-is_editable="false",因为缺少属性是等价的。我只关心它是否为“真”(如果属性存在)。我知道我可以使用其他属性,例如class,但我不想因为它似乎有点不合适(如果我错了,请纠正我)。

这是我正在阅读的资源,也许这是错误的文件或我忽略了我正在寻找的信息: http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

例如,这是合法且有效的吗?

<div data-editable data-draggable> My content </div>

2 个答案:

答案 0 :(得分:13)

您显示的示例有效。 (就像在表单中使用disabledchecked一样。只有xHTML强制存在值)

虽然返回的值不是布尔值。查询此资源时,您将获得任何空data-*属性的空字符串。

像这样:

 domNode.dataset.draggable; // log ""
 domNode.dataset.notAdded; // log null

所以,你只需要检查一下:

var isDraggable = (domNode.dataset.draggable != null)

修改

愚蠢之前没有说过。但是,如果你想要一个布尔值,你可以检查属性是否存在:

domNode.hasAttribute("data-draggable");

答案 1 :(得分:4)

它通过W3.org validator,这是一个好兆头。

Javascript的dataset和jQuery的data函数似乎知道那里的属性或缺失的属性 - 但是当它在那里时值是一个空字符串,并且未定义时为null,否则为null。为了避免混淆,我认为我不会亲自使用它 - 我可能会改为选择<div data-editable="1"></div>