向元素添加属性 Javascript

Question

我是 JavaScript 初学者，可以在以下查询中使用您的帮助：

我必须找到 html 中导航标签中的所有 li。现在我必须检查 li 是否具有数据方向属性，如果没有 - 将此属性设置为 "top"。我尝试使用简单的循环来完成它，但它似乎没有用 - 我一直从控制台获取 "direction is not defined" 的信息，所以它似乎没有将 "data-direction" 视为属性。也许我应该以不同的方式指出这个属性？这是我的代码：

   var navLi = document.querySelectorAll("nav li");

   for (i = 0; i < navLi.length; i++) {
       if (navLi[i].data-direction === " ") {
       navLi[i].data-direction = "top";
      }
   }

提前致谢！

Answer 1

您正在寻找 hasAttribute()/setAttribute()。

for (i = 0; i < navLi.length; i++) {
   if ( !navLi[i].hasAttribute('data-direction') ) {
     navLi[i].setAttribute('data-direction', 'top')
  }
}

Answer 2

getAttribute() 将 return null 或空字符串，因此您需要使用 hasAttribute() 方法来处理 null 情况。

for (var item of document.querySelectorAll("nav li")) {
  if (!item.hasAttribute("data-direction") || item.getAttribute("data-direction").trim() === "") {
    item.setAttribute("data-direction", "top");
  }
}

向元素添加属性 Javascript

Adding attribute to an element Javascript

javascript

attributes

selectors-api