Javascript html5数据属性需要值吗？

我想知道html数据属性是否真的需要应用一个值

我想知道这一点，因为我们通常只想知道属性是否真的设置为作为标志。（当然，我们可以为此使用一个类；但实际上，除非您打算以不同的方式设置这些项的样式，否则这些标志更多的是数据，而不是语义项）

一个很好的例子是，如果我们想要一个链接滚动到它的目标，而不是跳过jQuery代码，我们的代码可能如下所示：

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

我知道在google chrome中，锚显示为

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

但这在任何地方都有效吗？它甚至是有效的HTML5（我相信这是由于自动对焦，自动播放等属性）。还是我们需要：

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>

没有。但是

与所有属性一样，在

应用程序/xhtml+xml

序列化中，应用xml规则，并且属性必须具有显式名称和（引用的）值

所以这个问题实际上是关于

文本/html

序列化的，因此HTML5规范的相关部分是

特别是，根据，它说：

可以通过四种不同的方式指定属性：

其中第一项是：

空属性语法

只是属性名。该值隐式为空字符串

不过，有必要了解该值是字符串类型，而不是布尔类型

例如，使用

，属性“checked”由true或false反映。所以

if (document.getElementById("cb").checked)

对于上述标记，将计算为true

相比之下，使用

，“数据检查”属性通过dataset对象以字符串形式反映出来。此属性的值为空字符串，在JavaScript中为false。所以

if (document.getElementById("cb").dataset.checked)

对于上述标记，将计算为false

要进行等效测试，请比较“未定义”的值。即

对于上述标记，将计算为true

请参见元素属性的简单布尔测试 为了扩展Alohci的优秀答案，以下是一种简单、灵活的方法来测试使用三种标准HTML约定之一提供的

true

布尔属性值：

、

或

对于上面的代码，如果

未定义

，则该值为

false

，或者设置为以下值之一：

f*、n*、0

（不区分大小写），如果定义并设置为以下值之一：

（空字符串），（属性名称），（任何其他内容）

---

空字符串在这里计算为

true

，因为没有值的HTML属性是

'

，在JS中等于

false

（类似

的东西应该等于

）。通过删除

！=null&&a！==false

不确定您的快捷方式符号是否与浏览器兼容，但我个人更喜欢这种格式，因为它更明确。通过这种方式，true/false值确定此属性是否应用于元素，而不是元素的存在与否。要知道该值比默认值更好。请注意，我们希望答案能够解决问题中的特定问题。请务必密切注意正在使用的语言、平台、库等，并务必寻找精确问题的解决方案。@AndrewBarber感谢Andrew。如果我的回答太离题，我很抱歉，今后我会更加小心。我打算将此作为Alohci答案的一个扩展，它指出了一个重要的观点，即类似于标志的HTML属性的解释在JavaScript中可能会有很大的差异。我认为强调这一点是有帮助的，如果Hailwood（和其他人在这方面遇到障碍）打算在HTML元素中集成属性值较少的布尔值，那么提供一个有用的例子是有帮助的。@Beejor我知道这并不能直接回答这个问题，但为Alohci的答案提供了一个很好的扩展，如答案开头所述。如果您可以使用

aTrue

逻辑在代码块中添加一个清晰的示例，以完成对您放在顶部的逻辑的解释，则可以改进这一点。

if (document.getElementById("cb").dataset.checked !== undefined)

var a = elem['data-bar'];
var aTrue = ( a != null && a !== false && a !== 0 && a.charAt(0) != 'f' &&
              a.charAt(0) != 'n' );