时间戳

首页 > 解决方案 > 如何通过javascript更改类的所有元素的字体颜色？

javascript - 如何通过javascript更改类的所有元素的字体颜色？

问题描述

我有一个按钮可以更改我的网络应用程序的背景图像，并且我想在单击按钮时更改字体的颜色。

我尝试使元素成为自己的变量，但这也不起作用。

cafeButton.addEventListener('click', function(){
    bg.style.backgroundImage = "url('img/cafe.jpeg')"; //change text colors
    document.getElementsByClassName('topbutton').style.color = 'blue';
})

使用上述代码时，出现以下错误：

未捕获的类型错误：无法在 HTMLButtonElement 处设置未定义的属性“颜色”。

这是整个项目的codepen https://codepen.io/Games247/pen/XWJqebG

如何更改类名下所有元素的文本颜色？

标签： javascriptwebdom

解决方案

document.getElementsByClassName返回一个 DOM 节点列表。因此，您需要遍历它并将样式单独应用于所有元素。

cafeButton.addEventListener('click', function() {
  bg.style.backgroundImage = "url('img/cafe.jpeg')"; //change text colors
  var els = document.getElementsByClassName('topbutton');
  for (var i = 0; i < els.length; i++) {
    els[i].style.color = 'blue';
  }
})

推荐阅读