檢查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