gpt4 book ai didi

javascript - 将 .className 添加到对象不起作用

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:33:02 24 4
gpt4 key购买 nike

我正在尝试为我的导航元素设置一个类名,但它没有按预期工作。当我手动将类添加到我的 HTML 时,它会在无序列表项和按钮周围放置一个边框。当我使用 js 添加它时,它显示 nav 标签在检查器中具有属性,但它没有添加边框,所以我不相信它在工作。我究竟做错了什么?我已经链接到文件中的 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);

最佳答案

不要使用 .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");
}

};

使用 .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";
}

};

关于javascript - 将 .className 添加到对象不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32365077/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com