将.className添加到对象中无效。

Question

将.className添加到对象中无效。

6

我试图将 className 设置给我的导航元素，但结果与预期不符。当我手动将类添加到 HTML 时，它会在无序列表项和按钮周围加上边框。然而，当我使用 js 添加时，检查器显示导航标签具有该属性，但实际上并没有添加边框，因此我认为它没有生效。我做错了什么？我在文件中链接了 bootstrap cdn 和 jquery cdn。

HTML
<!doctype html>
  <html lang="en-us">
    <head>
      <title>Exercise 5.9</title>
      <meta charset="UTF-8">
      <meta equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    <body id="content">
    <!-- Latest compiled and minified CSS -->
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <nav>
      <div>
        <ul>
          <li>Home</li>
          <li>Our Policies</li>
          <li>How you can help</li>
          <li>What we have accomplished</li>
          <button type="button">Donate $10.00</button>
          <button type="button">Donate $50.00</button>
          <button type="button">Donate $100.00</button>
        </ul>
      </div>
    </nav>
        <p>If you would to offer financial support, please choose the buttons above</p>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="exercise-5.9.js"></script>
  </body>
</html>

JS
var nav = document.getElementsByTagName("nav");
nav.className = "navbar navbar-default";
console.log(nav);

- user5096599

你只是想设置类名吗？ - mwilson

1

尝试使用 var nav = document.getElementsByTagName("nav")[0];，因为你想获取第一个 nav 元素。 - NewToJS

getElementsByTagName 返回一组节点数组。 - Andy

我不明白你的意思。如果你使用了console.log(nav);，那为什么没有注意它的类型呢？ - Joaquín O

2个回答

1

getElementsByTagName() 返回一个数组，你应该写成 document.getElementsByTagName('nav')[0];

- Oussama Elgoumri

不是一个数组，而是一个 NodeList。 - RobG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mwilson · Accepted Answer

不要使用.className =，尝试直接设置class属性为你想要的值。然而，它无法正常工作的主要原因是因为.getElementsByTagName()会返回一个数组（nodeList），所以在设置类时，需要确保正确索引。

使用 .setAttribute("atr", "value")

var button = document.getElementById("btnGo");

button.onclick = function () {
    var nav = document.getElementsByTagName("nav");

    for (var i = 0; i < nav.length; i++) {
        nav[i].setAttribute("class", "myClassName");
    }

};

Using .className

var button = document.getElementById("btnGo");

button.onclick = function () {
    var nav = document.getElementsByTagName("nav");

    for (var i = 0; i < nav.length; i++) {
        nav[i].className = "myClass";
    }

};