正在检查没有值的HTML5数据属性

Checking for HTML5 data attribute with no value

本文关键字：HTML5 数据属性 检查      更新时间：2023-09-26

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

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

如果我像这样使用dataset：

getElementById("1").dataset.foo

那么，这将返回一个null值，并且我无法区分该元素是否具有data-foo属性。有没有办法检查元素是否有data-foo属性，而不管它是否有指定的值？

您可以通过使用hasAttribute方法检查元素是否包含属性来实现这一点：

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

如果元素没有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演示

相关文章：