点击链接让页面某个元素变色，几乎是每个前端初学者都会遇到的练习题。它把事件监听和DOM样式操作这两个最基础的能力串在了一起，代码量不大，但涉及的知识点不少。这篇教程会把几种常见的实现思路都过一遍，从最直接的行内绑定讲到更规范的事件委托写法，帮你彻底弄懂每一步背后的原理。
准备工作：页面结构与元素获取
先搭一个最简单的页面骨架：几个链接加上一个待变色的目标区域。为了方便JavaScript找到它们，建议给元素设置id或者class属性。下面这段HTML可以直接保存为index.html使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击链接变色示例</title>
</head>
<body>
<a href="#" id="redLink">变成红色</a>
<a href="#" id="blueLink">变成蓝色</a>
<a href="#" id="greenLink">变成绿色</a>
<div id="target" style="width:300px;height:200px;border:1px solid #ccc;">
我是目标区域
</div>
<script>
// 获取目标元素
var target = document.getElementById('target');
</script>
</body>
</html>获取元素有几种方式：document.getElementById按id精确查找，速度最快；document.querySelector支持CSS选择器语法，写法更灵活；document.getElementsByClassName和document.querySelectorAll则用于批量获取。如果页面元素不多，用哪种都行，但现代开发中querySelector的使用频率最高，因为它可以直接复用CSS选择器的知识。
方式一：onclick属性直接绑定
最省事的做法是直接在HTML的<a>标签上写onclick属性，调用一个JavaScript函数。这种方式的好处是直观，一眼就能看出点击会触发什么逻辑，特别适合做快速演示：
<script>
function changeColor(color) {
var target = document.getElementById('target');
target.style.backgroundColor = color;
return false; // 阻止链接默认跳转行为
}
</script>
<a href="#" onclick="return changeColor('red')">变成红色</a>
<a href="#" onclick="return changeColor('blue')">变成蓝色</a>注意这里有个细节：href="#"的链接点击后浏览器会跳到页面顶部并在地址栏加上井号，所以函数里必须return false，或者在onclick里写event.preventDefault()，否则用户体验会很奇怪。另外，修改背景色用的是element.style.backgroundColor属性，注意JavaScript中CSS属性名要写成驼峰形式，background-color这种横线写法在这里是无效的。
这种方式的缺点也很明显：HTML和JavaScript代码混在一起，如果页面有几十个链接，维护起来会很痛苦。而且在实际项目中，行内绑定不利于浏览器缓存JS文件，也不方便做代码压缩和单元测试，所以它更适合用来理解原理，而不是用在正式项目里。
方式二：addEventListener规范绑定
更推荐的做法是用addEventListener方法绑定事件，把JavaScript代码完全从HTML中抽离出来。这也是目前主流框架之外原生开发的标准写法：
document.getElementById('redLink').addEventListener('click', function(e) {
e.preventDefault(); // 阻止链接默认行为
document.getElementById('target').style.backgroundColor = 'red';
});
document.getElementById('blueLink').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('target').style.backgroundColor = 'blue';
});第一个参数是事件类型click，注意不带on前缀；第二个参数是事件触发时执行的回调函数，函数里的e是事件对象，调用e.preventDefault()可以阻止链接的默认跳转。相比行内绑定，这种写法可以给同一个元素绑定多个点击处理函数而不会互相覆盖，而且代码全部集中在script标签或独立JS文件中，结构清晰得多。
如果页面里的链接很多，逐个绑定会写出大量重复代码。这时可以借助data-自定义属性存储颜色值，用循环统一处理：
<a href="#" class="colorLink" data-color="red">红色</a>
<a href="#" class="colorLink" data-color="blue">蓝色</a>
<a href="#" class="colorLink" data-color="#ffcc00">金色</a>
<script>
var links = document.querySelectorAll('.colorLink');
links.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
var color = this.getAttribute('data-color');
document.getElementById('target').style.backgroundColor = color;
});
});
</script>这种写法的好处是，以后想增加颜色选项只需要加一个<a>标签，JavaScript代码一行都不用改，扩展性明显提升。data-color里既可以是颜色名称，也可以是十六进制色值，甚至可以放rgb格式的值，backgroundColor属性都能正确识别。
方式三：classList切换预定义样式类
直接操作style属性虽然简单，但当样式规则变复杂时，把颜色写在CSS类里会更整洁。JavaScript只负责切换类名，具体的样式交给样式表管理：
<style>
.bg-red { background-color: #e74c3c; color: #fff; }
.bg-blue { background-color: #3498db; color: #fff; }
</style>
<script>
document.getElementById('redLink').addEventListener('click', function(e) {
e.preventDefault();
var t = document.getElementById('target');
t.classList.remove('bg-blue');
t.classList.add('bg-red');
});
</script>classList提供了add、remove、toggle、contains四个常用方法。其中toggle特别适合做开关效果：点一下加上类，再点一下移除类。如果希望点击链接时在多个样式间轮流切换，可以配合contains判断当前状态。这种结构和样式分离的思想，正是大型项目里推荐的做法，因为设计师调整配色时只需要改CSS文件，不用碰任何逻辑代码。
进阶技巧：事件委托统一处理
如果链接是动态生成的，比如通过接口加载后插入页面，逐个绑定就会失效。事件委托利用了事件冒泡机制，把监听器挂在父元素上，一次性解决所有子元素的点击问题：
document.body.addEventListener('click', function(e) {
// 判断点击的是不是目标链接
if (e.target.classList.contains('colorLink')) {
e.preventDefault();
var color = e.target.getAttribute('data-color');
document.getElementById('target').style.backgroundColor = color;
}
});原理是点击事件会从被点击的元素沿着DOM树向上冒泡，最终到达body，我们在body上监听，再通过e.target判断实际被点击的元素。无论链接是页面加载时就存在，还是后来动态添加的，这段代码都能正常工作，而且整个页面只注册了一个事件监听器，内存占用更少。
把上面这些技巧组合起来，就能实现各种实用的交互效果：点击导航链接高亮对应板块、点击按钮切换深色模式、点击标签筛选内容等，本质上都是同一套事件监听加样式修改的思路。掌握之后，你会发现日常开发里大量的界面交互需求，都可以用几十行原生JavaScript轻松搞定。
JavaScript背景色事件处理修改时间：2026-09-16 23:30:43