Javascript 向对象添加.className无效_Javascript_Twitter Bootstrap

Javascript 向对象添加.className无效

javascript twitter-bootstrap

Javascript 向对象添加.className无效,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我试图为我的nav元素设置一个类名，但它没有按预期工作。当我手动将该类添加到HTML中时，它会在无序列表项和按钮周围放置一个边框。当我使用js添加它时，它显示nav标记在inspector中具有该属性，但它没有添加边框，因此我认为它不起作用。我做错了什么？我已在文件中链接到引导cdn和jquery cdn HTML <!doctype html> <html lang="en-us"> <head> <title>Exerc

我试图为我的nav元素设置一个类名，但它没有按预期工作。当我手动将该类添加到HTML中时，它会在无序列表项和按钮周围放置一个边框。当我使用js添加它时，它显示nav标记在inspector中具有该属性，但它没有添加边框，因此我认为它不起作用。我做错了什么？我已在文件中链接到引导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);

HTML
练习5.9

家
我们的政策
你能帮什么忙
我们所取得的成就
捐赠10美元
捐赠50美元
捐赠100美元

如果您想提供财务支持，请选择上面的按钮
JS
var nav=document.getElementsByTagName（“nav”）；
nav.className=“navbar navbar default”；
控制台日志（nav）；

不要使用

.className=

尝试将

class

的属性设置为您想要的任何属性。但是，它不起作用的主要原因是

.getElementsByTagName（）

返回一个数组（nodeList），因此您需要确保在设置类时，它已正确索引

使用
.setAttribute（“atr”、“值”）

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

};

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

};

getElementsByTagName（）返回一个数组，您应该编写

document.getElementsByTagName（'nav'）[0]
是否正在尝试设置类名？请尝试var nav=document.getElementsByTagName（“nav”）[0]
因为您想获取第一个nav元素。getElementsByTagName
返回一个节点数组。我不明白。。如果您执行了console.log（nav）
，为什么您没有注意到它的类型？我想您可能误读了源代码getElementsByTagName
为什么建议使用setAttribute而不是className属性？这没有什么好处。这里还需要注意的是，如果元素具有多个类，.setAttribute
和.className
都会将类完全重置为传递的值。尽管如此，如果您不小心覆盖了一个类，可能会出现一些不必要的行为。编写类似于（甚至利用）jQuerys.addClass
和.removeClass
的东西是一种更好的方法。