检查没有值的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 );

jsFiddle演示