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

Question

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

这是我正在阅读的资源,也许是错误的文件,或者我忽略了我正在寻找的信息:http: //www.w3.org/html/wg/drafts/html/master/dom.html#自定义数据属性

那么,例如,这是合法有效的吗？

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

Answer 1

您显示的示例有效.(就像使用disabled或checked表单一样.只xHTML强制存在值)

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

像这样:

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

所以,你只需要检查它:

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

编辑

愚蠢的没有告诉它.但是,如果你想要一个布尔值,你可以检查属性是否存在:

domNode.hasAttribute("data-draggable");

Answer 2

它通过了W3.org 验证器，这是一个好兆头。

Javascriptdataset和 jQuery 的data函数似乎知道存在或缺失的属性之间的区别 - 但是当它存在时该值是一个空字符串，而当它不存在时则为 undefined 或 null。为避免混淆，我认为我不会亲自使用它 - 我可能会改为选择<div data-editable="1"></div>。