背景颜色切换器优化求助：简化重复JS点击切换函数

你的代码重复度太高，核心逻辑都是修改document.body.style.backgroundColor，只是颜色值不同，完全可以用通用函数或者事件委托来简化，下面是几种实用方案：

方案1：通用函数+参数传递 #

把颜色作为参数传入同一个函数，彻底避免重复定义多个函数：

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

对应的HTML按钮写法（每个按钮调用时传入对应颜色）：

<button onclick="setBgColor('red')">红</button>
<button onclick="setBgColor('orange')">橙</button>
<button onclick="setBgColor('yellow')">黄</button>
<button onclick="setBgColor('limegreen')">绿</button>
<button onclick="setBgColor('blue')">蓝</button>
<button onclick="setBgColor('#4B0082')">靛</button>
<button onclick="setBgColor('violet')">紫</button>

方案2：事件委托（更优雅，无需内联事件） #

如果不想在HTML里写onclick，可以用事件委托，通过data-*属性存储颜色值，实现统一事件监听：

HTML部分 #

给按钮添加自定义属性data-color存储对应颜色：

<div class="color-buttons">
  <button data-color="red">红</button>
  <button data-color="orange">橙</button>
  <button data-color="yellow">黄</button>
  <button data-color="limegreen">绿</button>
  <button data-color="blue">蓝</button>
  <button data-color="#4B0082">靛</button>
  <button data-color="violet">紫</button>
</div>

JS部分 #

通过父元素监听点击事件，判断点击对象是按钮后获取颜色值：

document.querySelector('.color-buttons').addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON') {
    const color = e.target.dataset.color;
    document.body.style.backgroundColor = color;
  }
});

这种方式的好处是后续新增颜色按钮时，不用修改JS代码，只要给按钮加data-color属性即可。

方案3：动态生成按钮（数据逻辑分离） #

如果想更高效维护，可以用数组存储颜色信息，动态生成按钮并绑定事件：

// 定义颜色数组，包含按钮名称和对应颜色值
const colors = [
  { name: '红', value: 'red' },
  { name: '橙', value: 'orange' },
  { name: '黄', value: 'yellow' },
  { name: '绿', value: 'limegreen' },
  { name: '蓝', value: 'blue' },
  { name: '靛', value: '#4B0082' },
  { name: '紫', value: 'violet' }
];

// 创建按钮容器并添加到页面
const buttonContainer = document.createElement('div');
buttonContainer.className = 'color-buttons';
document.body.appendChild(buttonContainer);

// 遍历数组生成按钮并绑定点击事件
colors.forEach(color => {
  const btn = document.createElement('button');
  btn.textContent = color.name;
  btn.addEventListener('click', () => {
    document.body.style.backgroundColor = color.value;
  });
  buttonContainer.appendChild(btn);
});

这种方式把数据和逻辑彻底分离，后续修改颜色只需要更新数组即可，维护成本更低。

内容的提问来源于stack exchange，提问作者Jonny