document.getElementsByClassName设置backgroundColor失效问题求助

嘿，我一眼就看出问题所在啦！你用document.getElementsByClassName("changecolor")获取的不是单个DOM元素，而是一个HTMLCollection（类数组元素集合）——它包含了页面上所有带有changecolor类名的元素。而style属性是单个DOM元素才有的，直接给集合加style自然不会生效~

反观你给body设置背景色的代码能正常运行，是因为document.body本身就是单个DOM元素，所以直接调用.style.backgroundColor没问题。

下面给你两种针对性的解决方法：

情况1：页面中只有一个带changecolor类的元素 #

可以直接取集合的第一个元素（索引为0），或者用更简洁的querySelector（它返回匹配的第一个元素）：

// 方法1：通过索引取元素
document.getElementsByClassName("changecolor")[0].style.backgroundColor = randomColors();

// 方法2：用querySelector更直观
document.querySelector(".changecolor").style.backgroundColor = randomColors();

情况2：页面中有多个带changecolor类的元素 #

需要遍历整个元素集合，给每个元素单独设置背景色：

// 方法1：传统for循环
const colorElements = document.getElementsByClassName("changecolor");
for (let i = 0; i < colorElements.length; i++) {
  colorElements[i].style.backgroundColor = randomColors();
}

// 方法2：转成数组后用forEach遍历
Array.from(document.getElementsByClassName("changecolor")).forEach(element => {
  element.style.backgroundColor = randomColors();
});

你可以先在控制台打印console.log(document.getElementsByClassName("changecolor"))，看看返回的是不是一个集合，这样能更直观理解问题哦~

内容的提问来源于stack exchange，提问作者Xivik