本文介绍如何用简洁、可复用的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() 扩展。
总结：从“一个颜色一个函数”到“一个函数适配所有颜色”，再到“一个函数操控任意样式”，体现的是抽象能力的跃迁。精简不是目的，可维护性、可扩展性与语义清晰性，才是专业前端实践的核心。