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

Question

我想使用自定义布尔属性将元素的内容标记为可编辑。我知道

data-*

属性，但不确定它们是否需要值。我不需要

data-is_editable="false"

，因为缺少该属性是等效的。我只关心它是否为“true”（如果属性存在）。我知道我可以使用其他属性，例如

class

但我不想这样做，因为它似乎有点不合适（如果我错了，请纠正我）。

这是我正在阅读的资源，可能是错误的文档，或者我忽略了我正在寻找的信息： http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

举个例子，这合法有效吗？

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

Answer 1

您展示的示例是有效的。 （就像在表单中使用

disabled

或

checked

一样。只有

xHTML

强制存在值）

尽管如此，返回的值不是布尔值。当您查询此资源时，对于任何空的

data-*

属性，您将获得一个空字符串。

像这样：

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

要获取布尔值的存在性，您可以使用

hasAttribute

方法进行检查：

const isDraggable = domNode.hasAttribute("data-draggable");

Answer 2

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

Javascript 的

dataset

和 jQuery 的

data

函数似乎知道属性存在或缺失之间的区别 - 但当它存在时，该值是一个空字符串，当它不存在时，该值是未定义或 null。为了避免混淆，我认为我个人不会使用它 - 我可能会选择

<div data-editable="1"></div>

来代替。