如何使用JavaScript功能選擇和修改一組html <button>的

我試圖啓用和更改（特定）按鈕組的背景顏色。我將如何去分組這些按鈕，並打電話給他們，所以我不需要爲每個按鈕設置一個特定的ID？如何使用JavaScript功能選擇和修改一組html <button>的

編輯：

讓我更深入瞭解我正在嘗試做什麼。按鈕都佈置爲這樣：

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

我想這樣做（也試過Id和名稱）：

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

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

來源

2013-10-02 Michael McCormick

我假設提問者正試圖改變背景在飛行中的按鈕，沒有默認設置。 – Snowburnt

Snowburnt是正確的，我應該更具體。 –

將元素分組的最好方法是通過類，您必須將相同的類分配給您想要分組在一起的按鈕。沒有其他屬性分配給你的按鈕，JavaScript絕對沒有辦法知道如何區分它們，除非你做一些隨機的工作，比如將顏色分配給集合中的每個其他按鈕 – Snowburnt

使用jQuery ...

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

，如果你想按鈕組使用類屬性：

$("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：How to Get Element By Class in JavaScript?

啓用按鈕設置元素按鈕元素.enabled =真假

來源

2013-10-02 16:46:25 Snowburnt

他沒有要求jQuery解決方案 –

已更新爲javascript – Snowburnt

我還沒有測試過，但我認爲這將獲得頁面上的所有按鈕。我只是想改變一組特定的按鈕。對不起，我的問題不是很清楚。 –

如果我們談論的純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" 
    } 
}

來源

2013-10-02 16:46:36

我很欣賞這個答案，但我正在尋找一種方法，只會選擇頁面上的某些按鈕。理想情況下，我將能夠「document.getElementsByClass」。 –

這將是更多的代碼，但它仍然可以達到相同的效果。這將需要循環內部的if語句 - 這是不可取的。請在你的問題中更具體;） –

我能檢查什麼？有沒有辦法做到這樣的事情： if（className === keyBoard） –

創建一個「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-02 16:49:08 Viji

動態地，對不起，我可以看到這不夠清楚。 –

然後使用$（「。btn-color」）.css（「background-color」，「gray」）。你可以使用hexa值也可用於顏色 – Viji

我在猜測這是JQuery，我正在尋找一個純粹的JS/HTML答案。感謝您的回覆。 –

-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-02 16:57:57

我不認爲，你需要循環，做到這一點。你可以使用簡單的jquery選擇器，並通過addClass（）來完成。 – Viji

@Viji，他不是在尋求一個jQuery解決方案 –

你知道這種方法可以修改只改變頁面上的一組按鈕嗎？ –

如何使用JavaScript功能選擇和修改一組html <button>的

回答

相關問題