本文介绍如何用简洁、可复用的 javascript 函数替代冗长的重复代码，为 roygbv 七色按钮统一绑定背景色切换逻辑，并扩展支持任意元素与多 css 属性批量设置。
在开发中，为每个颜色单独编写一个函数（如 myFunctionRed()、myFunctionBlue() 等）不仅代码冗余、难以维护，也违背了“单一职责”和“DRY（Don’t Repeat Yourself）”原则。更优解是抽象出通用逻辑：将颜色值作为参数传入，由一个函数统一处理样式变更。
✅ 推荐方案一：单参数背景色函数（简洁实用）
function setBodyBgColor(color) {
document.body.style.backgroundColor = color;
}HTML 中直接绑定（以红色按钮为例）：
✅ 优势：语义清晰、零依赖、兼容所有浏览器；支持任意合法 CSS 颜色值（命名色、HEX、RGB、HSLA 等）。
✅ 推荐方案二：通用元素样式函数（灵活扩展）
若未来需为其他元素（如 #header、.card）设置背景，可升级为双参数函数：
立即学习“Java免费学习笔记（深入）”；
function setBgColor(element, color) {
element.style.backgroundColor = color;
}
// 使用示例：
setBgColor(document.body, 'indigo');
setBgColor(document.querySelector('.container'), '#f0f8ff');✅ 进阶方案：全能 CSS 批量设置工具函数
当需求不止于背景色（例如还需同步修改文字色、字体大小），推荐使用高内聚的 css() 工具函数：
const css = (el, styles) =>
typeof styles === 'object'
? Object.assign(el.style, styles)
: (el.style.cssText = styles);
// 一次设置多项样式（对象语法）
css(document.body, {
backgroundColor: 'purple',
color: 'white',
fontFamily: 'system-ui, sans-serif',
transition: 'background-color 0.3s ease'
});
// 或使用 CSS 字符串语法（适合复杂规则）
css(document.body, `
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: #333;
padding: 2rem;
`);⚠️ 注意事项
- 避免内联样式污染：长期项目建议优先使用 CSS 类名切换（element.classList.add('theme-red')），便于主题管理与 CSS 动画控制；
- 无障碍友好：为按钮添加 aria-label（如 aria-label="切换为红色背景"）并确保足够对比度；
- 性能提示：频繁调用 style 属性不会引发重排，但大量动态样式建议通过
通过以上重构，你将用不到 10 行核心代码替代原先 7 个函数，大幅提升可读性、可维护性与扩展潜力——这才是现代前端开发应有的简洁思维。
