如何用单个 JavaScript 函数高效切换页面背景色

本文介绍如何用简洁、可复用的 javascript 函数替代冗长的多函数方案，实现点击 roygbv 按钮一键切换页面背景色，并进一步扩展为通用 css 样式批量设置工具。

在实际开发中，为每种颜色单独编写一个函数（如 myFunctionred()、myFunctionOrange()）不仅代码重复度高、维护困难，也违背了“单一职责”与“DRY（Don’t Repeat Yourself）”原则。更优雅的解法是抽象共性逻辑：所有操作本质都是“为目标元素设置 background 样式”，因此只需一个参数化函数即可覆盖全部场景。

✅ 推荐方案一：单参数背景色设置函数

最简改进是将颜色作为参数传入，统一处理：

function setBodyBgColor(color) {   document.body.style.backgroundColor = color; }

html 中配合按钮使用（无需内联 onclick=”…”，推荐事件委托或直接绑定）：

   R   O   Y   G   B   I   V 

✅ 优势：代码量减少 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 需求，更构建了一个可随项目演进持续复用的轻量级样式控制工具——这才是现代前端开发应有的简洁与韧性。