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

新手上路,请多包涵

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

HTML:

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

记者:

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

如果你们给我一些关于我的代码中缺少什么/我应该添加什么等的提示,我将非常感激。

原文由 skrttt44 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 366
2 个回答

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>

原文由 Ele 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

原文由 Maya 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题