在前端页面开发中，通过JavaScript动态修改元素的字体颜色是非常实用的功能，既可以响应用户的交互操作，也可以根据页面的状态自动调整样式表现，提升用户的使用体验。
基础实现原理
要实现动态改变字体颜色，核心步骤只有两步：首先通过DOM方法获取到需要修改的目标元素，然后修改该元素的style.color属性即可。JavaScript中操作元素样式的方式很简单，所有行内样式都可以通过元素的style对象直接访问和修改。
获取元素的常用方法
获取目标元素的方式有很多种，常用的包括以下几种：
document.getElementById(id)：通过元素的id属性获取唯一元素document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素document.getElementsByClassName(className)：通过类名获取所有匹配的元素集合
基础示例代码
下面是一个最简单的示例，点击按钮后直接修改段落的字体颜色：
<!-- 页面结构 -->
<p id="targetText">这是一段需要改变颜色的文本</p>
<button id="changeColorBtn">点击改变颜色</button>
<script>
// 获取目标文本元素和按钮元素
const textElement = document.getElementById('targetText');
const btnElement = document.getElementById('changeColorBtn');
// 给按钮绑定点击事件
btnElement.addEventListener('click', function() {
// 修改文本的字体颜色为红色
textElement.style.color = 'red';
});
</script>
结合事件的动态变色
实际开发中更多是根据用户的不同操作触发颜色变化，比如鼠标悬停、输入框输入内容等场景，下面分别介绍几种常见场景的实现方式。
鼠标悬停改变颜色
当鼠标移动到元素上时改变字体颜色，鼠标移开后恢复原来的颜色：
<p id="hoverText">鼠标悬停在这段文本上会改变颜色</p>
<script>
const hoverElement = document.getElementById('hoverText');
// 记录原始颜色，方便后续恢复
const originalColor = hoverElement.style.color || 'black';
// 鼠标移入事件
hoverElement.addEventListener('mouseenter', function() {
this.style.color = 'blue';
});
// 鼠标移出事件
hoverElement.addEventListener('mouseleave', function() {
this.style.color = originalColor;
});
</script>
输入框输入触发变色
根据输入框的内容长度动态改变提示文本的颜色，比如输入内容超过10个字符时变为橙色：
<input type="text" id="inputField" placeholder="请输入内容">
<p id="tipText">当前输入长度：0</p>
<script>
const inputField = document.getElementById('inputField');
const tipText = document.getElementById('tipText');
inputField.addEventListener('input', function() {
const length = this.value.length;
tipText.textContent = `当前输入长度：${length}`;
// 长度超过10时变为橙色，否则为默认黑色
if (length > 10) {
tipText.style.color = 'orange';
} else {
tipText.style.color = 'black';
}
});
</script>
批量修改多个元素颜色
如果需要同时修改多个同类型元素的字体颜色，可以通过获取元素集合后遍历修改：
<ul>
<li class="listItem">列表项1</li>
<li class="listItem">列表项2</li>
<li class="listItem">列表项3</li>
</ul>
<button id="batchChangeBtn">批量改变列表项颜色</button>
<script>
const listItems = document.getElementsByClassName('listItem');
const batchBtn = document.getElementById('batchChangeBtn');
batchBtn.addEventListener('click', function() {
// 遍历所有列表项，修改颜色
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.color = 'green';
}
});
</script>
注意事项
- 如果元素本身已经在CSS中定义了
color样式，行内样式（通过style属性修改的样式）的优先级更高，会覆盖CSS中的定义 - 颜色值支持多种格式，比如颜色单词
red、十六进制#ff0000、RGB格式rgb(255,0,0)、HSL格式hsl(0,100%,50%)都可以正常使用 - 如果需要修改的颜色是通过CSS类定义的，更推荐直接修改元素的
className或者classList，而不是直接操作style属性，这样更便于样式维护
除了直接修改style.color属性之外，也可以通过操作元素的类来间接修改字体颜色，这种方式在样式逻辑比较复杂的时候更有优势，开发者可以根据实际的场景选择合适的实现方式。
JavaScript动态改变字体颜色DOM操作style属性事件监听修改时间：2026-06-19 06:24:26