如何实现按钮onclick切换全页文本颜色并排除footer、链接等指定元素

核心思路 #

• 采用全局类选择器覆写的方式实现，不需要手动遍历DOM节点修改内联样式，性能更好，也能覆盖页面所有嵌套层级的文本，包括div内外、表单标签、段落等所有场景。
• 不需要在JS逻辑里做元素判断过滤，只要在CSS规则里单独定义不需要改色的元素选择器，就能实现排除效果，后续维护成本极低。

具体实现步骤 #

1. 编写全局切换的CSS规则 #

把下面的CSS加到你现有的样式文件里：

/* 定义各颜色切换的作用域，挂在body标签上即可全页生效 */
body.text-red, body.text-red * {
  color: #dc2626 !important;
}
body.text-blue, body.text-blue * {
  color: #2563eb !important;
}
body.text-green, body.text-green * {
  color: #16a34a !important;
}
body.text-black, body.text-black * {
  color: #000000 !important;
}

/* 定义需要排除的元素，不管切到哪个颜色都保持原有样式 */
body.text-red footer, body.text-red a,
body.text-blue footer, body.text-blue a,
body.text-green footer, body.text-green a,
body.text-black footer, body.text-black a {
  color: inherit !important;
}

这里的通配符*是为了选中所有元素嵌套的文本，不会出现内层div、表单标签的文本漏改的情况，同时也能覆盖伪元素（::before/::after）渲染的文本内容

2. 给切换按钮绑定交互逻辑 #

把下面的JS代码放到页面</body>闭合标签之前即可：

// 按钮类名和对应要切换的样式类的映射关系
const colorClassMap = {
  redbutton: 'text-red',
  bluebutton: 'text-blue',
  greenbutton: 'text-green',
  blackbutton: 'text-black'
}

// 给所有颜色按钮绑定点击事件
document.querySelectorAll('.changecolor button').forEach(button => {
  button.addEventListener('click', () => {
    // 先清除body上之前加的所有颜色类，避免类名叠加冲突
    document.body.classList.remove('text-red', 'text-blue', 'text-green', 'text-black')
    // 匹配当前按钮对应的目标样式类，添加到body上
    const targetClass = colorClassMap[button.classList[1]]
    if (targetClass) {
      document.body.classList.add(targetClass)
    }
  })
})

3. 后续扩展说明 #

• 如果要新增排除元素，只需要把对应元素的选择器加到上面CSS的排除规则列表里就行，比如要排除某段固定提示文本，只要给那段文本加个专属类名，在排除规则里补上这个类的选择器即可，不需要改动JS逻辑。
• 如果想让排除元素保持固定颜色而不是继承原有样式，只要把排除规则里的color: inherit改成对应的固定色值即可。

为什么不推荐遍历DOM改文本颜色 #

• 递归遍历DOM树的方式性能开销大，碰到动态加载的新内容、嵌套在Shadow DOM里的元素会出现漏改的问题。
• 遍历过程中需要写复杂的判断逻辑过滤排除元素，代码冗余度高，后续调整排除规则的时候还要同步改JS，维护成本高。

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