如何使用普通javascript检查数据属性是否存在？

Question

我想使用普通的javascript检查HTML5数据属性是否存在.我已经尝试了下面的代码片段,但它不起作用.

if(object.getAttribute("data-params")==="undefined") {
   //data-attribute doesn't exist
}

Answer 1

Element.getAttributenull如果该属性不存在,则返回或清空字符串.

你用的是Element.hasAttribute:

if (!object.hasAttribute("data-params")) {
    // data attribute doesn't exist
}

或Element.dataset(另见:in运营商):

if (!("params" in object.dataset)) {
    // data attribute doesn't exist
}

甚至

if (!object.getAttribute("data-params")) {
    // data attribute doesn't exist or is empty
}

Answer 2

对null进行检查也会得出解决方案。

if (object.getAttribute("data-params") === null) {
//data attribute doesn't exist
 }else{
 //data attribute exists
 }

Answer 3

您也可以只使用数据集 API。

HTMLElement.dataset

HTMLElement.dataset 只读属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性 (data-*)。它是 DOMString 的映射，每个自定义数据属性都有一个条目。

遗憾的是，这在 IE10 中不起作用，但我很确定某处有一个垫片。

这是一个例子

var containerData 	= document.querySelector('#container').dataset,
    contentData 	= document.querySelector('#content').dataset;

// Check if dataset is empty or not.
console.log(Object.keys(containerData).length === 0);
console.log(Object.keys(contentData).length === 0);

// Check for specific data
if (containerData.hasOwnProperty('bar')) {
  console.log(containerData.bar);
}

// Here is the dataset
console.log(containerData);

<div id="container" data-foo="bar" data-bar="foo">
  <div id="content">
    Content
  </div>
</div>