实现单击按钮改变文档颜色【4个按钮，分别为red,blue,yellow,green】；

在网页或前端开发中，实现单击按钮改变文档颜色通常涉及到JavaScript或相关的库如jQuery。下面是一个简单的示例，展示了如何使用JavaScript和HTML创建这个功能：

HTML部分：

<button id="red-btn">红色</button>
<button id="blue-btn">蓝色</button>
<button id="yellow-btn">黄色</button>
<button id="green-btn">绿色</button>

<div id="content" style="background-color: #fff;"></div>

JavaScript部分：

// 获取按钮元素
const buttons = document.querySelectorAll('button');
// 获取内容区域
const content = document.getElementById('content');

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 根据按钮ID改变背景颜色
    switch (this.id) {
      case 'red-btn':
        content.style.backgroundColor = 'red';
        break;
      case 'blue-btn':
        content.style.backgroundColor = 'blue';
        break;
      case 'yellow-btn':
        content.style.backgroundColor = 'yellow';
        break;
      case 'green-btn':
        content.style.backgroundColor = 'green';
        break;
    }
  });
});

在这个例子中，当用户点击任一按钮时，会触发相应的`click`事件处理器，根据按钮ID将文档内容区(`#content`)的颜色更改为对应的颜色。