我有三个div具有相同类名的s,我想改变使用JavaScript的高度和颜色.我的代码坏了,不知道为什么.我在这里查看了类似问题的答案,我的代码似乎与解决方案相同.
我知道我的代码在哪里破解以及如何修复它?
<HTML>
<head></head>
<body>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<script>
function altSize() {
var bar = document.getElementsByClassName("bar");
bar.style.height = 200px;
bar.style.background = 'red';
}
altSize();
</script>
</body>
</HTML>
Run Code Online (Sandbox Code Playgroud)
它在这里打破:
bar.style.height=200px;
Run Code Online (Sandbox Code Playgroud)
原因是200px你不能在JS中分配它,它读取200并且不知道如何处理px,它不是有效数字.
而且,getElementsByClassName返回a NodeList而不是单个元素.
修复它
for(var i=0;i<bar.length;i++){
bar[i].style.height="200px";
}
Run Code Online (Sandbox Code Playgroud)