JS设置.symbol类边框失效问题排查：页面切白背景时边框未变黑

核心原因 #

你使用的document.querySelector(".symbol")只会选中页面中第一个匹配.symbol类的元素，其他同类型元素不会被修改样式，这就是只有部分元素边框颜色生效的直接原因。

其他可能的辅助原因 #

• 元素无基础边框样式：如果目标元素没有设置border-style（比如solid、dashed），仅设置borderColor不会显示边框——因为CSS默认border-style为none，没有样式的边框即使设置颜色也无法显示。
• 样式优先级冲突：如果该元素的边框被更高优先级的CSS规则覆盖（比如带!important的样式、更具体的选择器规则），JS设置的内联样式可能无法生效。
• 事件未正确绑定：要确保handleStyleColorChange函数已经正确绑定到按钮的点击事件上，否则这段样式修改代码根本不会执行。

修复代码示例 #

把querySelector换成querySelectorAll，遍历所有.symbol元素统一设置样式：

function handleStyleColorChange() {
  const targetColor = event.target.matches('.white-btn') ? "#141516" : "#ced4e2";
  document.body.style.color = targetColor;
  // 遍历所有.symbol元素修改边框颜色
  document.querySelectorAll(".symbol").forEach(item => {
    item.style.borderColor = targetColor;
    // 如果元素原本没有边框样式，可添加此行确保边框显示
    // item.style.borderStyle = "solid";
  });
}

内容的提问来源于stack exchange，提问作者Mizgin Yıldırak