本文介绍如何用简洁、可复用的 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 个函数，大幅提升可读性、可维护性与扩展潜力——这才是现代 前端 开发应有的简洁思维。
