使用 JavaScript 实现点击 Div 切换颜色和文本
在前端页面开发中，交互效果是提升用户体验的重要部分。其中点击元素切换样式和内容是比较常见的需求，本文将介绍如何通过原生 JavaScript 实现点击 Div 元素时，同时切换其背景颜色和显示文本的功能。
实现思路
整个功能的实现可以分为以下几个步骤：
- 首先在 HTML 中创建一个用于交互的 Div 元素，设置初始的样式和内容
- 通过 JavaScript 获取这个 Div 元素，为其绑定点击事件监听器
- 在点击事件的处理函数中，定义两组不同的颜色和文本状态，通过判断当前状态来切换到另一组状态
- 使用条件判断或者状态变量来记录当前 Div 所处的状态，避免状态混乱
完整代码示例
下面是完整的实现代码，包含 HTML 结构和 JavaScript 逻辑，代码中添加了中文注释说明每一步的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击Div切换颜色和文本</title>
<style>
/* 定义Div的基础样式 */
#switchDiv {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 8px;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
/* 初始状态：浅蓝色背景，显示初始文本 */
background-color: #e3f2fd;
color: #1565c0;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 交互用的Div元素 -->
<div id="switchDiv">点击我切换状态</div>
<script>
// 获取目标Div元素
const switchDiv = document.getElementById('switchDiv');
// 定义状态标识，0表示初始状态，1表示切换后的状态
let currentState = 0;
// 为Div绑定点击事件
switchDiv.addEventListener('click', function() {
if (currentState === 0) {
// 切换到状态1：修改背景颜色、文字颜色和显示文本
switchDiv.style.backgroundColor = '#ffebee';
switchDiv.style.color = '#c62828';
switchDiv.textContent = '已切换到状态一';
currentState = 1;
} else {
// 切换回状态0：恢复初始的背景颜色、文字颜色和显示文本
switchDiv.style.backgroundColor = '#e3f2fd';
switchDiv.style.color = '#1565c0';
switchDiv.textContent = '点击我切换状态';
currentState = 0;
}
});
</script>
</body>
</html>代码说明
上述代码中，我们首先通过 CSS 为 Div 设置了基础的尺寸、居中对齐、圆角等样式，同时添加了 transition 属性让颜色和文本的变化有一个平滑的过渡效果，提升视觉体验。
在 JavaScript 部分，首先通过 document.getElementById 方法获取到 id 为 switchDiv 的元素，然后定义一个 currentState 变量来记录当前 Div 的状态，初始值为 0。
接着为 Div 绑定 click 事件监听器，每次点击时判断当前的状态：如果是状态 0，就将背景色改为浅红色、文字颜色改为深红色，同时修改显示文本为"已切换到状态一"，并将状态变量改为 1；如果是状态 1，就恢复初始的浅蓝色背景、深蓝色文字和初始文本，同时将状态变量改回 0。
扩展优化
如果需要支持更多组状态的切换，也可以将状态和对应的样式、文本存储在一个数组中，点击时循环切换状态索引，这样后续新增状态只需要修改数组内容即可，不需要修改事件处理逻辑，示例代码如下：
// 定义状态数组，每个元素包含背景色、文字色和显示文本
const stateList = [
{ bgColor: '#e3f2fd', textColor: '#1565c0', content: '点击我切换状态' },
{ bgColor: '#ffebee', textColor: '#c62828', content: '已切换到状态一' },
{ bgColor: '#e8f5e9', textColor: '#2e7d32', content: '已切换到状态二' },
{ bgColor: '#fff3e0', textColor: '#ef6c00', content: '已切换到状态三' }
];
let currentIndex = 0;
const switchDiv = document.getElementById('switchDiv');
switchDiv.addEventListener('click', function() {
// 切换到下一个状态，索引超过数组长度时回到第一个状态
currentIndex = (currentIndex + 1) % stateList.length;
const currentState = stateList[currentIndex];
// 应用当前状态的样式和文本
switchDiv.style.backgroundColor = currentState.bgColor;
switchDiv.style.color = currentState.textColor;
switchDiv.textContent = currentState.content;
});这种写法让代码的可维护性更高，适合需要多状态切换的场景。