检查HTML5数据属性没有价值

Question

我有了一个HTML5 data属性没有价值，但就在关键的这样一个元素：如果我使用dataset这样

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

：

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 Demo