Question

您可以使用data-*属性作为布尔属性吗？如果没有，还有其他选择吗？

例如，您可以

<input disabled>

在某些情况下有帮助

<input data-on>

不宜使用data-on="true"或data-on="" - 属性的状态应指明其布尔值。

Answer 1

您确实可以使用data-*属性，就像它们是布尔属性一样 - 但是，就dataset而言，<input data-on>相当于{{1} }}。这意味着与<input data-on="">或其他布尔属性不同，您将无法执行此操作：

required

相反，您需要对undefined进行显式检查：

<input class="some-class" data-on required>

var elementOfInterest = document.querySelector(".some-class");
if (elementOfInterest.dataset.on) {
    // We will never get here because dataset.on === ""
    // and "" == false
}

if (elementOfInterest.required) {
    // We *do* get here because required is a boolean attribute
}

这使您无法区分if (elementOfInterest.dataset.on !== undefined) { // We will get here because "" !== undefined }和data-on，但是如果您将其视为布尔属性，它们都会加起来相同的东西（只有缺少属性）表示虚假。）

Answer 2

是的，data-*属性可以作为布尔属性，至少就DOM和浏览器选择器引擎而言：http://jsfiddle.net/MhJNb/

我尚未测试兼容性，但Chrome将div[data-on]规则应用于<div data-on></div>没有问题。

布尔数据 - *属性

2 个答案: