Question

我有这种情况：

//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

Answer 1

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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"));
}

＆＃13;

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

＆＃13;

Answer 2

首先，您的代码中存在拼写错误：

var id = document.ge l ElementById（'div'）;

它应该是： var id = document.ge t ElementById（'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>

希望这可以提供帮助，劳拉。

Javascript＆＃39; hasAttribute＆＃39;不适用于数据属性

2 个答案: