admin管理员组文章数量:1291532
I am attempting to set a className to my nav element and it isn't working as intended. When I manually add the class to my HTML it puts a border around the unordered list items and the buttons. When I use js to add it, it shows that the nav tag has the attribute in the inspector but it does not add the border so I do not believe it is working. What am I doing wrong? I have linked to the bootstrap cdn and jquery cdn in the file.
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 piled and minified CSS -->
<script src="//code.jquery/jquery-1.11.3.min.js"></script>
<script src="//code.jquery/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href=".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 acplished</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=".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);
I am attempting to set a className to my nav element and it isn't working as intended. When I manually add the class to my HTML it puts a border around the unordered list items and the buttons. When I use js to add it, it shows that the nav tag has the attribute in the inspector but it does not add the border so I do not believe it is working. What am I doing wrong? I have linked to the bootstrap cdn and jquery cdn in the file.
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 piled and minified CSS -->
<script src="//code.jquery./jquery-1.11.3.min.js"></script>
<script src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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 acplished</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./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);
- are you just trying to set the class name? – mwilson Commented Sep 3, 2015 at 0:10
-
1
Try
var nav = document.getElementsByTagName("nav")[0];Since you want to get the first nav element. – NewToJS Commented Sep 3, 2015 at 0:12 -
getElementsByTagNamereturns an array of nodes. – Andy Commented Sep 3, 2015 at 0:12 -
I don't get you.. If you did
console.log(nav);, why didn't you notice it's type? – Joaquín O Commented Sep 3, 2015 at 0:15
2 Answers
Reset to default 5Instead of using .className = try just setting the attribute of class to whatever you want. The main reason why it's not working, however, is because .getElementsByTagName() returns an array (nodeList) so you need to make sure when you set the class, it's properly indexed.
Using .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";
}
};
getElementsByTagName() return an array, you should write document.getElementsByTagName('nav')[0];
本文标签： javascriptadding className to object is not workingStack Overflow
版权声明：本文标题：javascript - adding .className to object is not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741533009a2383868.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论