ROYGBV是红、橙、黄、绿、蓝、靛、紫七种颜色的缩写，实现多色背景切换时，不需要为每个颜色按钮单独写切换函数，通过单个JavaScript函数就能完成所有颜色的切换逻辑，大幅减少代码冗余。
实现思路梳理
核心逻辑是将颜色值和对应的按钮关联起来，点击按钮时把对应的颜色值传递给同一个处理函数，由函数统一修改页面的背景颜色。具体分为三个步骤：
- 搭建包含七个ROYGBV颜色按钮的HTML结构，给每个按钮设置对应的颜色标识
- 配置按钮的基础样式，让按钮本身显示对应的颜色，方便用户识别
- 编写单个JavaScript函数，接收颜色参数并修改页面背景，通过事件委托或者给按钮绑定统一的处理逻辑实现调用
HTML结构搭建
我们创建七个按钮，分别对应ROYGBV七种颜色，给每个按钮添加data-color自定义属性存储对应的颜色值，方便后续函数读取。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROYGBV多色背景切换</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-container">
<button class="color-btn" data-color="#FF0000">红</button>
<button class="color-btn" data-color="#FFA500">橙</button>
<button class="color-btn" data-color="#FFFF00">黄</button>
<button class="color-btn" data-color="#008000">绿</button>
<button class="color-btn" data-color="#0000FF">蓝</button>
<button class="color-btn" data-color="#4B0082">靛</button>
<button class="color-btn" data-color="#EE82EE">紫</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS样式配置
给按钮容器和按钮设置基础样式，让按钮排列整齐，同时按钮的背景色和对应的颜色一致，提升用户体验。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.btn-container {
display: flex;
gap: 15px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
.color-btn {
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
color: #333;
font-weight: bold;
transition: transform 0.2s ease;
}
.color-btn:hover {
transform: scale(1.1);
}
/* 给每个按钮设置对应的背景色 */
.color-btn[data-color="#FF0000"] {
background-color: #FF0000;
}
.color-btn[data-color="#FFA500"] {
background-color: #FFA500;
}
.color-btn[data-color="#FFFF00"] {
background-color: #FFFF00;
}
.color-btn[data-color="#008000"] {
background-color: #008000;
}
.color-btn[data-color="#0000FF"] {
background-color: #0000FF;
}
.color-btn[data-color="#4B0082"] {
background-color: #4B0082;
color: #fff;
}
.color-btn[data-color="#EE82EE"] {
background-color: #EE82EE;
}
单个JavaScript函数实现
核心的切换函数只需要接收一个颜色参数，然后将这个参数赋值给document.body.style.backgroundColor即可。我们可以通过事件委托的方式，给按钮容器绑定点击事件，点击按钮时获取对应data-color的值传递给切换函数。
// 单个背景切换函数，接收颜色值作为参数
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
// 获取按钮容器
const btnContainer = document.querySelector('.btn-container');
// 给容器绑定点击事件，通过事件委托处理所有按钮的点击
btnContainer.addEventListener('click', function(event) {
// 判断点击的是不是颜色按钮
if (event.target.classList.contains('color-btn')) {
// 获取按钮的data-color属性值
const targetColor = event.target.getAttribute('data-color');
// 调用切换函数，传入颜色值
changeBackgroundColor(targetColor);
}
});
逻辑优化说明
上述实现中，事件委托的方式避免了给七个按钮分别绑定点击事件，进一步减少了代码量。如果后续需要新增其他颜色的按钮，只需要在HTML中添加对应的按钮元素，设置好data-color属性和CSS样式即可，不需要修改JavaScript的核心逻辑，扩展性更好。
另外，切换函数changeBackgroundColor只负责修改背景颜色，功能单一，符合单一职责原则，后续如果需要添加切换时的额外逻辑，比如记录用户选择的颜色到本地存储，只需要在调用这个函数的地方添加逻辑，不需要修改函数本身。
完整代码运行说明
将上述三段代码分别保存为index.html、style.css、script.js三个文件，放在同一个目录下，用浏览器打开index.html就能看到效果。点击不同的ROYGBV按钮，页面背景会平滑切换到对应的颜色，按钮点击时还会有轻微的放大效果，提升交互体验。
JavaScriptROYGBV背景切换前端交互修改时间：2026-07-16 00:36:35