Javascript 'hasAttribute' 不适用于数据属性答案

【问题标题】：Javascript 'hasAttribute' don't works on data-attributesJavascript 'hasAttribute' 不适用于数据属性
【发布时间】：2017-11-30 07:22:57
【问题描述】：

我有这种情况：

//first situation:
<div id="div" data-attr="value">My div</div>
script:
var id = document.getElementById('div');
if(id.hasAttribute("data-attr")){...
//second situation:
//second situation:
<div id="div">My div</div>
script:
var id = document.getElementById('div');
id.setAttribute('data-attr','value');  
if(id.hasAttribute("data-attr")){...

第二个例子不起作用：我想知道为什么？

编辑： setAttributeNode 只是一个错字，我用了 setAttribute

【问题讨论】：

你为什么不用dataset？
尝试改用setAttribute - 考虑到代码会失败
@JaromandaX — ?!这有什么帮助？
@Quentin - 因为使用 setAttribute 是您设置属性的方式 - setAttributeNode 做了完全不同的事情，并且 OP 的代码应该会因错误而失败
很公平 - 但我的评论仍然有效，.setAttributeNode 在代码中被错误使用 - 一旦他修复了 gelElementById，这将是下一个失败点

标签： javascript html custom-data-attribute

【解决方案1】：

最好的方法是使用dataset 属性，示例如下。

let div = document.getElementById("data");
if (div.dataset.foo) {
  console.log("data", div.dataset.foo);
}

let empty = document.getElementById("data-empty");
empty.dataset.foo = "bar";
if (empty.dataset.foo) {
  console.log("data-empty", empty.dataset.foo);
}

<div id="data" data-foo="bar"></div>
<div id="data-empty"></div>

如果您想使用您的代码，那么它可以正常工作。

var div = document.getElementById('div');
if(div.hasAttribute("data-attr")){
  console.log("div", div.getAttribute("data-attr"));
}

var empty = document.getElementById('div-empty');
empty.setAttribute('data-attr','value');  
if(empty.hasAttribute("data-attr")){
  console.log("div-empty", empty.getAttribute("data-attr"));
}

<div id="div" data-attr="value">My div</div>
<div id="div-empty">My div</div>

【讨论】：

【解决方案2】：

首先，您的代码中有一个错字：

var id = document.gelElementById('div');

应该是： var id = document.getElementById('div');

然后，像这样包含您的 JS 代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="div">My div</div>
</body>
    <script type="text/javascript">
        var id = document.getElementById('div');
        id.setAttribute('data-attr','value');
    </script>
</html>

希望这会有所帮助，劳拉。

【讨论】：

对不起，这只是一个打字错误，我复制并粘贴了代码的第一部分，匆忙中我没有注意到它。不幸的是'id.setAttribute('data-attr','value');'正如我已经写过的那样，它不起作用，这就是问题所在......
别担心，这很常见；）