如何修改所有<li>元素的背景色？编写的代码无法正常生效

首先看一下你的代码里的两个语法错误，这是导致代码无法运行的关键：

• for循环条件部分缺失变量：你写的是 < x.length，正确的应该是 i < x.length，必须加上循环变量i，不然JS无法识别要进行比较的对象。
• for循环增量部分多了冗余分号：i++后面不需要额外的分号，写成i++即可。

修正后的代码： #

// 获取文档中所有<li>元素
var x = document.querySelectorAll("li");
for (let i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

更简洁的替代写法（使用forEach）： #

如果你觉得传统for循环写起来繁琐，也可以用forEach方法遍历元素，代码可读性更强：

document.querySelectorAll("li").forEach(li => {
  li.style.backgroundColor = "red";
});

额外注意事项： #

如果修正后代码仍然没有效果，大概率是脚本在DOM元素加载完成前就执行了。解决办法有两种：

• 把脚本标签放在HTML的</body>标签之前，确保脚本在所有DOM元素渲染后执行；
• 或者把代码包裹在DOM加载完成的事件监听里：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放你的修改代码
  document.querySelectorAll("li").forEach(li => {
    li.style.backgroundColor = "red";
  });
});

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