布尔数据-*属性

Question

你能将data-*属性用作布尔属性吗？如果不能，有没有替代方法？

例如，你可以这样使用：

<input disabled>

有时候拥有以下内容会非常有帮助：

<input data-on>

使用 data-on="true" 或 data-on="" 并不理想 -- 属性的 存在 应该表明其布尔值。

- Explosion Pills

---

本质上，data-on 就是 data-on=""，使用 jQuery，你可以简单地执行 $("input").is("[data-on]");。 - FabianCook

注意：var t=document.createElement("input"); t.disabled=true; t.outerHTML == '<input disabled="">'; 所以我会说不行，但你可以将HTML序列化方式与浏览器不同... - dandavis

属性的存在应该表示它的布尔值：typeof element.dataset.on !== 'undefined'。 - dfsq

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
}

相反，您需要明确检查undefined：

if (elementOfInterest.dataset.on !== undefined) {
    // We will get here because "" !== undefined
}

这使您无法区分data-on和data-on=""，但如果您将其视为布尔属性，则它们都等同于相同的结果（仅缺少属性表示为假）。

- Sean Vieira

Answer 2

是的，data-* 属性可以作为布尔属性使用，至少在 DOM 和浏览器选择器引擎方面是如此。http://jsfiddle.net/MhJNb/

我没有测试兼容性，但 Chrome 可以轻松地将 div[data-on] 规则应用于 <div data-on></div>。

- Asad Saeeduddin