Question

我正在尝试启用和更改（特定）按钮组的背景颜色。我如何分组这些按钮并调用它们，这样我就不需要为每个按钮设置一个特定的ID？

编辑：

更深入地了解我想要做的事情。按钮都是这样布局的：

<button onclick="keyPress('e')">e</button>

我尝试做了什么（也试过Id和名字）：

//light up keys
//document.getElementsByTagName("button").style.backgroundColor = 'silver';

//activate keys
//document.getElementsByTagName("button").disabled = false;

Answer 1

使用jquery ......

$("button").css("background", new color)

如果你想要按钮组使用class属性：

$("button.class1").css("background", new color)

for javascript：

var buttons=getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) { 
   buttons[i].style.backgroundColor="newcolor";
}

这是按类名执行此操作的方法，以便您可以使用纯javascript按类对元素进行分组：How to Get Element By Class in JavaScript?

启用按钮设置元素按钮元素.enabled = true或false

Answer 2

如果我们说的是纯粹的javascript：

将它们选择为具有var array = document.getElementsByTagName("button");的数组，并在循环内进行操作。您可以使用.className = "whatever"将它们设置为css类，也可以使用.style = "whatever"对象手动设置它

循环检查className：

for (i=0; i<array.length; i++) {
    if (array[i].className == [whatever condition]) {
        array[i].style.backgroundColor = "whatever"; 
        //or array[i].className = "whatever"
    }
}

Answer 3

创建一个“css类”并将相同的类应用于所有按钮。

<style>
.btn-color
{
   background-color:grey;
}
</style>

<input type="button" id = "btn1" class = "btn-color" />
<input type="button" id = "btn2" class = "btn-color" />
<input type="button" id = "btn3" class = "btn-color" />
<input type="button" id = "btn4" class = "btn-color" />

动态，然后使用JQuery

 $(".btn-color").css("background-color","grey")

使用Javascript

var elements = document.querySelectorAll(".btn-color");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "blue";
}

JSFiddle：http://jsfiddle.net/EmzH8/

Answer 4

如果您要搜索动态更改一组按钮背景的代码，请尝试以下方法：

的CSS：

.myClass{
background-color:red;
}

JS：

function changeBG(){
var inputs=document.getElementsByTagName("input")
var buttons=document.getElementsByTagName("button")

for(var i=0;i<inputs.length;i++){
var input=inputs[i]
if(input.type=="button"){
input.className="myClass"
}
for(i=0;i<buttons.length;i++){
var button=buttons[i]
button.className="myClass"

}

}

请记住，此代码将更改页面中所有按钮的背景

如何使用JavaScript函数</button>选择和修改一组html <button>

4 个答案: