检查没有值的HTML5数据属性

Question

我有一个HTML5 data属性的元素没有值，只有像这样的键：

<div id="1" data-foo>Foo</div>

如果我像这样使用dataset：

getElementById("1").dataset.foo

然后，这将返回一个空值，我无法区分该元素是否具有data-foo属性。是否有方法检查元素是否具有data-foo属性，无论它是否具有指定值？

Answer 1

您可以通过使用hasAttribute方法检查元素是否包含属性来完成此操作：

document.getElementById('1').hasAttribute('data-foo')

Answer 2

如果该元素没有data-foo属性，则对dataset.foo的调用将返回undefined，而不是null（或者是var fooVal = document.getElementById('div1').dataset.foo; // data-foo is not present at all: if( fooVal === undefined ) { } // data-foo is present but empty if( fooVal === '' ) { } 的空字符串空属性）。

您应该检查实际值，如下所示：

var hasFoo = ( document.getElementById('div1').dataset.foo !== undefined );

当然，您可以将逻辑转换为一个简单的布尔值：

{{1}}

jsFiddle Demo