本文介绍如何用简洁、可复用的javascript函数替代多个重复的颜色切换函数，通过参数化设计实现rogbiv等任意颜色的一键背景设置，并延伸至通用css样式批量应用。
在开发中，为每个颜色单独编写一个函数（如 myFunctionRed()、myFunctionBlue()）不仅冗余，还难以维护和扩展。更优雅的解法是抽象共性逻辑：所有操作本质都是“为目标元素设置 background 样式值”。因此，我们只需一个接收颜色参数的函数即可：
function setBodyBgColor(color) {
document.body.style.backgroundColor = color;
}HTML 中可直接绑定（以 ROYGBV 按钮为例）：
✅ 优势明显：代码量从 7 个函数缩减为 1 个；支持任意合法 CSS 颜色值（关键词、HEX、RGB、HSLA 等），例如：
setBodyBgColor("hsla(270, 100%, 60%, 0.9)"); // 动态紫调
setBodyBgColor("rgba(255, 99, 71, 0.8)"); // 半透明番茄红进一步升级：若未来还需修改其他元素（如 #header）或设置多种样式（背景+文字色+字体大小），推荐使用通用样式注入函数：
立即学习“Java免费学习笔记（深入）”；
const css = (el, styles) => {
if (typeof styles === 'object') {
Object.assign(el.style, styles);
} else {
el.style.cssText = styles;
}
};用法示例：
// 批量设置 body 样式
css(document.body, {
backgroundColor: 'indigo',
color: 'white',
fontFamily: 'system-ui, sans-serif',
transition: 'background-color 0.3s ease'
});
// 或传入 CSS 字符串（重置全部内联样式）
css(document.body, `
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
padding: 2rem;
`);⚠️ 注意事项：
- 避免过度依赖 onclick 内联事件——生产环境建议用 addEventListener 解耦 HTML 与 JS；
- Object.assign(el.style, ...) 仅覆盖指定属性，安全；而 el.style.cssText = ... 会完全替换现有内联样式，慎用；
- 如需支持 CSS 变量（如 --primary-color）或主题切换，可结合 document.documentElement.style.setProperty() 扩展。
总结：从“一个颜色一个函数”到“一个函数适配所有颜色”，再到“一个函数操控任意样式”，体现的是抽象能力的跃迁。精简不是目的，可维护性、可扩展性与语义清晰性，才是专业前端实践的核心。
