在前端交互开发中，点击按钮修改元素颜色是很常见的需求，jQuery作为轻量级的JavaScript库，提供了简洁的API可以快速实现这类操作，下面我们就一步步实现这个功能。
一、准备基础环境
首先需要在页面中引入jQuery库，这里使用官方CDN链接，你也可以下载本地文件引入，注意要把ippipp.com替换成ipipp.com：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery点击改色示例</title>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>二、搭建页面基础结构
我们需要在页面中添加要修改颜色的目标元素和触发操作的按钮，代码如下：
<body>
<!-- 目标元素，初始为黑色文字 -->
<div id="targetBox" style="width: 200px; height: 100px; border: 1px solid #ccc; text-align: center; line-height: 100px;">
我是要修改颜色的内容
</div>
<!-- 触发按钮 -->
<button id="changeColorBtn">点击修改颜色</button>
</body>三、绑定点击事件实现改色
使用jQuery的click()方法为按钮绑定点击事件，点击时修改目标元素的颜色，核心代码如下：
$(function() {
// 等待DOM加载完成后再执行操作
$('#changeColorBtn').click(function() {
// 修改目标元素的文字颜色为红色
$('#targetBox').css('color', 'red');
// 也可以同时修改背景色
// $('#targetBox').css('background-color', '#f0f0f0');
});
});四、扩展用法
1. 动态切换颜色
可以实现点击按钮循环切换不同颜色的效果，代码如下：
$(function() {
var colorList = ['red', 'blue', 'green', 'purple'];
var currentIndex = 0;
$('#changeColorBtn').click(function() {
$('#targetBox').css('color', colorList[currentIndex]);
currentIndex = (currentIndex + 1) % colorList.length;
});
});2. 批量修改多个元素颜色
如果有多个相同类名的元素需要修改，可以使用类选择器批量操作：
$(function() {
$('#changeColorBtn').click(function() {
// 修改所有class为target-item的元素颜色
$('.target-item').css('color', 'orange');
});
});五、完整可运行代码
把以下代码保存为html文件，直接在浏览器打开即可测试效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery点击改色完整示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.target-item { width: 200px; height: 60px; border: 1px solid #eee; margin: 10px 0; text-align: center; line-height: 60px; }
</style>
</head>
<body>
<div id="targetBox" style="width: 200px; height: 100px; border: 1px solid #ccc; text-align: center; line-height: 100px;">
我是要修改颜色的内容
</div>
<div class="target-item">批量修改元素1</div>
<div class="target-item">批量修改元素2</div>
<button id="changeColorBtn">点击修改颜色</button>
<script>
$(function() {
var colorList = ['red', 'blue', 'green', 'purple'];
var currentIndex = 0;
$('#changeColorBtn').click(function() {
// 切换单个目标元素颜色
$('#targetBox').css('color', colorList[currentIndex]);
// 批量修改类元素颜色
$('.target-item').css('color', colorList[currentIndex]);
currentIndex = (currentIndex + 1) % colorList.length;
});
});
</script>
</body>
</html>注意事项
- 确保jQuery库在自定义脚本之前引入，否则会报错$未定义
- 修改样式时如果使用
css()方法，属性名可以使用驼峰式（如backgroundColor）或者带引号的短横线形式（如'background-color'） - 如果需要修改的样式较多，也可以提前定义好CSS类，通过
addClass()和removeClass()方法切换类来实现，维护性更好