本文介绍如何用简洁、可复用的 javascript 函数替代冗长的多函数方案，实现点击 roygbv 按钮一键切换页面背景色，并进一步扩展为通用 css 样式批量设置工具。
在实际开发中，为每种颜色单独编写一个函数（如 myFunctionRed()、myFunctionOrange()）不仅代码重复度高、维护困难，也违背了“单一职责”与“DRY（Don’t Repeat Yourself）”原则。更优雅的解法是抽象共性逻辑：所有操作本质都是“为目标元素设置 background 样式”，因此只需一个参数化函数即可覆盖全部场景。
✅ 推荐方案一：单参数背景色设置函数
最简改进是将颜色作为参数传入，统一处理：
function setBodyBgColor(color) {
document.body.style.backgroundColor = color;
}HTML 中配合按钮使用（无需内联 onclick="..."，推荐事件委托或直接绑定）：
<div class="color-buttons">
<button onclick="setBodyBgColor('red')">R</button>
<button onclick="setBodyBgColor('orange')">O</button>
<button onclick="setBodyBgColor('yellow')">Y</button>
<button onclick="setBodyBgColor('limegreen')">G</button>
<button onclick="setBodyBgColor('blue')">B</button>
<button onclick="setBodyBgColor('#4B0082')">I</button>
<button onclick="setBodyBgColor('violet')">V</button>
</div>✅ 优势：代码量减少 6 倍以上，语义清晰，支持任意合法 CSS 颜色值（命名色、HEX、RGB、HSLA 等）。
立即学习“Java免费学习笔记（深入）”；
✅ 推荐方案二：通用元素样式设置函数（进阶）
若未来还需修改文字色、字体大小等，建议升级为支持任意 CSS 属性的通用函数：
const css = (el, styles) => {
if (typeof styles === 'object') {
Object.assign(el.style, styles);
} else if (typeof styles === 'string') {
el.style.cssText += '; ' + styles;
}
};用法示例——一键设置多属性：
// 批量设置 body 样式
css(document.body, {
backgroundColor: 'indigo',
color: 'white',
fontFamily: 'sans-serif',
transition: 'background-color 0.3s ease'
});
// 或传入 CSS 字符串（适合复杂声明）
css(document.body, 'background: linear-gradient(135deg, #ff9a9e, #fad0c4);');? 提示：Object.assign(el.style, obj) 是安全可靠的批量赋值方式，避免手动拼接 cssText 可能引发的覆盖风险。
⚠️ 注意事项与最佳实践
-
避免内联事件处理器：生产环境建议用 addEventListener 分离 HTML 与 JS，例如：
document.querySelectorAll('.color-buttons button').forEach((btn, i) => { btn.addEventListener('click', () => css(document.body, { backgroundColor: COLORS[i] })); }); -
预定义颜色数组提升可维护性：
const COLORS = ['red', 'orange', 'yellow', 'limegreen', 'blue', '#4B0082', 'violet'];
- 添加过渡动效增强体验：在 CSS 中为 body 添加 transition: background-color 0.25s ease;，让颜色变化更平滑。
通过函数抽象与参数化设计，你不仅解决了当前的 ROYGBV 需求，更构建了一个可随项目演进持续复用的轻量级样式控制工具——这才是现代前端开发应有的简洁与韧性。
