Question

我制作了一个脚本，我可以通过点击表格中的一个td标签给div一个backgroundcolor。问题是，我想给更多的div一个颜色。

使用getElementById（）它只能选择一个div而不是2。

我的CSS：

td {width:20px; height:20px;}
.result{width:200px; height:100px; margin:10px auto; background:green;}

我的剧本：

function bgcolor(color){
        els = document.getElementByClassName('result');
        for(i in els){
            els[i].style.backgroundColor = color;
        }
    }

我的HTML：

<table>
    <tr>
        <td style="background:red;" onclick="bgcolor('red')"></td><td style="background:blue;" onclick="bgcolor('blue')"></td>
    </tr>
    <tr>
        <td style="background:green;" onclick="bgcolor('green')"></td><td style="background:yellow;" onclick="bgcolor('yellow')"></td>
    </tr>
    <tr id="row">
        <td style="background:brown;" onclick="bgcolor('brown')"></td><td style="background:grey;" onclick="bgcolor('grey')"></td>
    </tr>
</table>
<div class="result"></div>

我做错了什么？

Answer 1

创建一个功能来更改颜色，使用参数指定哪种颜色。 getElementsByClassName返回一个集合，因此您需要遍历集合并每次应用背景颜色：

function bgcolor(color){
  els = document.getElementsByClassName('result');
  for(i in els){
    els[i].style.backgroundColor = color
  }
}

然后用

调用它

bgcolor('red');

Answer 2

如果您希望所有元素都必须getElementByClassName(classname)（元素为复数形式），则调用document.getElementsByClassName(classname)返回带有指定类的第一个元素

Answer 3

首先使用document.getElementsByClassName。

如何选择多个元素

3 个答案: