0

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

编辑：

为了更深入地了解我正在尝试做的事情。按钮的布局都是这样的：

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

我尝试做的事情（也尝试过 Id 和 Name）：

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

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

4 回答 4

0

使用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

于 2013-10-02T16:46:25.300 回答
0

如果我们谈论的是纯 JavaScript：

将它们选择到一个数组中，var array = document.getElementsByTagName("button");并在循环中进行操作。您可以使用将它们设置为 css 类.className = "whatever"，也可以使用.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"
    }
}
于 2013-10-02T16:46:36.013 回答
0

创建一个“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/

于 2013-10-02T16:49:08.123 回答
-1

如果您正在搜索代码以动态更改一组按钮的背景，请尝试以下操作：

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"

}

}

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

于 2013-10-02T16:57:57.467 回答