JS为指定class所有元素设置变量定义背景色，现有代码不生效求助

核心问题点 #

• document.querySelector() 仅匹配首个符合条件的元素，无法实现所有对应class元素批量设置背景色的需求
• 若页面不存在某一个对应class的元素，querySelector() 会返回null，调用null.style会抛出JS异常，中断后续所有代码执行，导致剩余的颜色设置逻辑全部失效

修复后代码 #

// 可调整的颜色配置
const colorConfig = {
  nhcp1: "red",      // 颜色1
  nhcp2: "blue",     // 颜色2
  nhcp3: "pink",     // 颜色3
  nhcp4: "green",    // 颜色4
  nhcp5: "violet"    // 颜色5
};

window.onload = function () {
  // 遍历所有颜色配置批量设置
  for (const [className, color] of Object.entries(colorConfig)) {
    // 匹配所有对应class的元素
    const elements = document.querySelectorAll(`.${className}`);
    // 遍历元素逐个设置背景色，无匹配元素时也不会报错
    elements.forEach(el => el.style.backgroundColor = color);
  }
};

优化说明 #

• 用对象统一管理颜色配置，后续新增/修改颜色仅需要调整colorConfig内的属性即可，不用重复编写设置逻辑
• 用querySelectorAll匹配所有同class元素，批量设置样式
• 无对应class元素时不会抛出异常，不影响其他逻辑执行

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