Question

在下面的codepen上查看我的小项目......

基本上我只是测试我的JavaScript知识，我想学习如何将所有按钮更改为同一个类，并使用JavaScript输入一个颜色，该颜色将改变给定类的所有按钮的背景颜色“纽扣”。我只能设法让它一次只能用于1节课而不是几节课。

这可能是一个简单的答案，但我已经做了很多挖掘，我找不到一个！有人可以帮忙吗？

谢谢，

亚当

Answer 1

无法同时更改多个元素的类或样式，您必须一次迭代并将其应用于一个元素

var buttons = document.querySelectorAll('.buttons');

for (var i=0; i<buttons.length; i++) {

    buttons[i].style.background = 'red';
    buttons[i].className = buttons[i].className + ' newclass';

}

Answer 2

HTML和JS代码中存在一些微不足道的错误。

1）在很多地方，而不是class =＆＃34; button＆＃34;对于输入标记，您将其指定为id =＆＃34; buttons＆＃34;。请记住，每个元素都应该有唯一的ID。

2）您正在设置按钮[3]的style.backgroundColor属性，而不是所有具有类名按钮的对象。

document.getElementsByClassName（＆＃39; buttons＆＃39;）为您提供一个具有类名＆＃34;按钮的对象数组。＆＃34;您需要迭代此数组的每个元素，并将其背景颜色属性设置为适当的值。

您可以使用for-in循环或标准for循环来实现此目的。我使用了for-in循环。

for (button in buttons) {
    buttons[button].style.backgroundColor = div2.children[0].value;
}

请参阅此链接以获取项目的工作副本：http://jsfiddle.net/mayank_agarwal/LaQuz/

使用JavaScript更改具有相同名称的多个类？

2 个答案: