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，因此您需要使用索引获取元素，在您的案例索引中=== 0 getElementsByClassName[0]。

实际上，您不需要调用函数getElementsByClassName，将元素作为参数传递。

＆＃13;

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

＆＃13;

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

＆＃13;

使用事件绑定和函数querySelectorAll

的更好方法

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

className属性设置或返回元素的类名（元素的类属性的值）。

＆＃13;

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

＆＃13;

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

＆＃13;

getElementsByClassName（）方法返回all的集合   具有指定类名的文档中的元素，作为NodeList   对象

NodeList对象表示节点的集合。节点可以   通过索引号访问。索引从0开始。

Source

Answer 4

使用jquery，尝试一下。如果您的按钮ID是说id = clickme

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

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

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

4 个答案: