如何僅使用 javascript 更改按鈕顏色 onclick？

Question

我試圖使用 onclick 和 getElementsByClassName 改變按鈕的顏色，並想出了這樣的東西：

HTML：

<button onclick="submitButtonStyle()" type="submit" class="stylebutton"> 
Submit </button>

JS：

function submitButtonStyle() { 
document.getElementsByClassName("stylebutton").style.backgroundColor = "red"; }

如果你們給我一個關於我的代碼中缺少什么/我應該添加什么等的提示，我將非常感激。

Answer 1

getElementsByClassName返回一個HTMLCollection因此您需要使用索引獲取元素，在您的情況下 index === 0 getElementsByClassName[0] 。

實際上，您不需要調用函數getElementsByClassName ，將元素作為參數傳遞。

 function submitButtonStyle(_this) { _this.style.backgroundColor = "red"; }

 <button onclick="submitButtonStyle(this)" type="submit" class="stylebutton"> Submit </button>

使用事件綁定和函數querySelectorAll更好方法

 document.querySelectorAll('.stylebutton').forEach(function(e) { e.addEventListener('click', function() { this.style.backgroundColor = "red"; }) });

 <button type="submit" class="stylebutton"> Submit </button>

Answer 2

document.getElementsByClassName返回一個對象數組，因為許多標簽可能具有相同的類。 如果您知道只有一個對象具有給定的類，請使用

document.getElementsByClassName("stylebutton")[0].style.backgroundColor = "red";

Answer 3

className 屬性設置或返回元素的類名（元素的類屬性的值）。

 function submitButtonStyle() { document.getElementsByClassName("stylebutton")[0].style.backgroundColor = "red"; }

 <button onclick="submitButtonStyle()" type="submit" class="stylebutton"> Submit </button> JS:

getElementsByClassName() 方法返回文檔中具有指定類名的所有元素的集合，作為 NodeList 對象。

NodeList 對象表示節點的集合。 可以通過索引號訪問節點。 索引從 0 開始。

Answer 4

使用 jquery，試試這個。 如果您的按鈕 ID 是 id= clickme

$("clickme").on('çlick', function(){

    $(this).css('background-color', 'grey'); .......