javascript - 布尔数据-* 属性

Question

您可以将data-*属性用作布尔属性吗？如果没有，是否有替代方案？

例如，您可以拥有

<input disabled>

在某些情况下会有帮助

<input data-on>

使用data-on="true"ordata-on=""是不可取的——属性的存在应该表明它的布尔值。

Answer 1

您确实可以像使用布尔data-*属性一样使用属性 - 但是，就dataset相关而言<input data-on>，它相当于<input data-on="">. 这意味着required您将无法执行不同的或其他布尔属性：

<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和data-on=""，但是如果您将其视为布尔属性，它们无论如何都会加起来相同的东西（只有缺少该属性表示错误。）

Answer 2

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

我还没有测试过兼容性，但是 Chrome 将div[data-on]规则应用于<div data-on></div>.