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

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)

对于 JavaScript：

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

这里有一种方法可以按类

名来做到这一点，以便你可以用纯JavaScript按类对元素进行分组：如何在JavaScript中按类获取元素？

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

Answer 2

创建一个"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 3

如果我们谈论的是纯 JavaScript：

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

循环检查类名：

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

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"
}
}

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