如何仅使用 javascript 更改按钮颜色 onclick？

Question

我试图使用 onclick 和 getElementsByClassName 改变按钮的颜色，并想出了这样的事情：

HTML:

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

JS：

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

如果你们能给我一些提示，让我知道我的 code/what 我应该补充什么，我将不胜感激

Answer 1

document.getElementsByClassName returns 对象数组，因为许多标签可能具有相同的 class。如果您知道只有一个对象具有给定的 class，请使用

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

Answer 2

getElementsByClassName returns 一个 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 3

class名称属性设置或 returns 元素的 class 名称（元素的 class 属性的值）。

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

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

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Source

Answer 4

使用jquery，试试这个。如果您的按钮 ID 是 id= clickme

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

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

如何仅使用 javascript 更改按钮颜色 onclick？

How to change button color onclick using javascript only?

javascript

onclick

getelementsbyclassname