JavaScript getElementByClassName + setAttribute不工作
我想迭代getElementByClassName函数返回的html集合。我想使用setAttribute方法将"table-info“添加到集合中元素的class属性中。
我的问题是，并不是所有的元素都被修改了，具体来说，只有集合的第一个元素没有改变它的类。尤其令我困惑的是，如果我硬编码for -循环，我想要的结果仍然没有实现。
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet">
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"></script>
<link href="/static/favicon.ico" rel="icon">
<link href="/static/styles.css" rel="stylesheet">
<title>Country comparison: {% block title %}{% endblock %}</title>
</head>
<body>
<div>
<table class="table">
<tbody>
<thead>
<th>Country</th>
<th>Currency</th>
<th>GDP</th>
<th class="bar">Unenployment Rate</th>
<th class="bar">Inflation Rate</th>
<th class="bar">Interest Rate</th>
<th>Balance of Trade</th>
<th>Consumer Confidence</th>
<script>
myFunction()
function myFunction() {
const foo = document.getElementsByClassName("bar")
foo[0].setAttribute("class", "table-info");
foo[1].setAttribute("class", "table-info");
foo[2].setAttribute("class", "table-info");
}
</script>
</thead>
</tbody>
</table>
</div>
</body>我尝试了querySelectorAll()但没有成功，也尝试将脚本标记移动到其他位置，但没有成功。
我的目标是让表的元素在页面加载之前接收它们的类，因为Bootstrap将成功地为我的表的字段着色。
回答 3
Stack Overflow用户
发布于 2022-11-12 15:04:21
当您直接设置class属性时，它会覆盖元素所拥有的任何类(例如bar)。因为getElementsByClassName返回一个活动列表，所以删除bar会改变foo变量的内容，从而删除以前有bar的元素的条目。如果您只是添加了新的类而没有删除栏，那么这个问题就会停止。试一试
foo[0].classList.add("table-info")
还请参见https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Stack Overflow用户
发布于 2022-11-12 15:18:17
解决方案1
myFunction()
function myFunction() {
const foo = document.getElementsByClassName("bar")
foo[0].setAttribute("class", "bar table-info");
foo[1].setAttribute("class", "bar table-info");
foo[2].setAttribute("class", "bar table-info");
}解决方案2
myFunction()
function myFunction() {
const foo = document.getElementsByClassName("bar")
for(let f of foo) f.setAttribute("class", "bar table-info");
}解决方案3
<thead>
<th>Country</th>
<th>Currency</th>
<th>GDP</th>
<th class="bar table-info">Unenployment Rate</th>
<th class="bar table-info">Inflation Rate</th>
<th class="bar table-info">Interest Rate</th>
<th>Balance of Trade</th>
<th>Consumer Confidence</th>
</thead>Stack Overflow用户
发布于 2022-11-12 15:06:05
我用了问号器。就像另一个答案说的，这是一个活的列表，不能工作。您应该将getelementbyclassname转换为一个数组，或者使用queryselector。
这里还有一个explanation on why that happens
下面是一个使用queryselector的工作示例
<script>
function myFunction() {
var bars = document.querySelectorAll(".bar");
for (var i = 0; i < bars.length; i++) {
bars[i].className = "table-info";
}
}
myFunction()
</script>https://stackoverflow.com/questions/74413867
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号