JavaScript为所有div设置彩虹线性渐变报错：Uncaught TypeError求解

错误原因 #

document.getElementsByTagName("div")返回的是HTMLCollection（类数组对象），包含页面中所有div元素，而非单个DOM元素。集合本身没有style属性，直接给它设置backgroundImage就会抛出Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundImage')错误。

修复方案 #

你需要遍历集合中的每个div元素，逐一设置背景样式，以下是几种可行写法：

方法1：传统for循环（兼容所有浏览器） #

var elems = document.getElementsByTagName("div");
for (var i = 0; i < elems.length; i++) {
  elems[i].style.backgroundImage = "linear-gradient(45deg, red, yellow, orange, green, blue, purple, pink)";
}

方法2：转数组后用forEach（ES6+） #

const elems = Array.from(document.getElementsByTagName("div"));
elems.forEach(elem => {
  elem.style.backgroundImage = "linear-gradient(45deg, red, yellow, orange, green, blue, purple, pink)";
});

方法3：用querySelectorAll直接遍历（现代浏览器支持） #

querySelectorAll返回的NodeList对象在现代浏览器中支持forEach方法，写法更简洁：

document.querySelectorAll("div").forEach(elem => {
  elem.style.backgroundImage = "linear-gradient(45deg, red, yellow, orange, green, blue, purple, pink)";
});

额外注意 #

如果你的代码在DOM未完全加载时执行，可能获取不到任何div元素。建议把代码放在页面底部，或者包裹在DOMContentLoaded事件监听中：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll("div").forEach(elem => {
    elem.style.backgroundImage = "linear-gradient(45deg, red, yellow, orange, green, blue, purple, pink)";
  });
});

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