Как изменить цвет шрифта всех элементов класса через javascript?

Question

У меня есть кнопка, которая меняет фоновое изображение моего веб-приложения, и я хочу изменить цвет шрифта при нажатии кнопки.

Я пытался сделать элемент своей собственной переменной, но это не либо не работают.

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

При использовании приведенного выше кода я получаю следующую ошибку:

Uncaught TypeError: Невозможно установить свойство 'color' из undefined в HTMLButtonElement.

Вот кодекс всего проекта https://codepen.io/Games247/pen/XWJqebG

Как изменить цвет текста всех элементов под именем класса?

Answer 1

document.getElementsByClassName возвращает список узлов DOM. Поэтому вам нужно пройти через него oop и применить стили ко всем элементам индивидуально.

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';
  }
})

Answer 2

Вы делаете это неправильно. document.getElementsByClassName дает вам список узлов определенного c класса. Так что вы должны пройти через это. Итак, в вашем коде используйте это:

var nodeList = document.getElementsByClassName('topbutton')
nodeList.forEach(node => {
  node.style.color = 'blue'
})

Или вы также можете использовать document.querySelectorAll('.topbutton') вместо document.getElementsByClassName('topbutton')

Answer 3

getElementsByClassName дает вам DOMCollection, который является не чем иным, как массивом. Следовательно, вы должны стилизовать каждый элемент внутри массива. например.

[...document.getElementsByClassName('topbutton')].forEach((ele)=>{ele.style.color = 'blue';});