在 HTML5 中动态修改元素颜色有五种方法：一、直接改 style.color 或 style.backgroundColor；二、切换预设 CSS 类名；三、用 getComputedStyle 读取并调整当前颜色；四、通过 CSS 变量集中控制；五、用 setAttribute 批量设置内联样式。
如果您希望在 HTML5 页面中通过 JavaScript 动态修改元素的文本颜色或背景颜色，则需要操作 DOM 元素的 style 属性。以下是实现此目标的多种方法：
一、直接修改元素 style 属性
该方法适用于已知具体 DOM 元素且需即时单次变色的场景，通过 JavaScript 直接设置内联样式中的 color 或 background-color 值。
1、使用 document.getElementById 获取目标元素对象。
2、将该元素的 style.color 属性赋值为指定颜色字符串，例如 ”#ff0000″ 或 ”red“。
立即学习 “ 前端免费学习笔记（深入）”；
3、将该元素的 style.backgroundColor 属性赋值为指定颜色字符串，注意属性名含大写字母 B 和 C。
4、确保颜色值格式合法，支持十六进制（如 #336699）、英文关键字（如blue）、rgb()（如rgb(255, 128, 0)）和 rgba() 格式。
二、通过 className 切换预设 CSS 类
该方法将颜色定义在外部或内部 CSS 中，JS 仅负责切换 class 名称，有利于样式与行为分离，便于维护和复用。
1、在
2、使用 element.className = “text-red bg-yellow” 直接替换全部类名。
3、或使用 element.classList.add(“text-red”) 和 element.classList.remove(“text-blue”) 精确控制增删。
4、调用 element.classList.toggle(“active”) 可实现点击切换颜色状态，适合按钮高亮等交互。
三、使用 getComputedStyle 读取并调整当前颜色
该方法用于基于现有颜色做增量修改，例如加深、变亮或反色，需先获取计算后的颜色值再解析处理。
1、调用 window.getComputedStyle(element).color 获取当前文本颜色，返回值为 rgb() 或 rgba()格式字符串。
2、使用 正则表达式 提取 r、g、b 数值，例如 /rgb((d+),s*(d+),s*(d+))/ 匹配标准 rgb 值。
3、对各通道数值进行运算，如 r = Math.min(255, r + 30)，防止溢出。
4、拼接新 rgb 字符串并赋值给 element.style.color，例如 element.style.color = `rgb(${r},${g},${b})`。
四、通过 CSS 自定义属性（CSS 变量）控制颜色
该方法利用 CSS 变量实现主题色集中管理，JS 仅修改根元素或父容器的变量值，所有依赖该变量的样式自动更新。
1、在：root 选择器中声明变量，例如 –main-color: #2196f3; –bg-color: #f5f5f5;。
2、在 CSS 规则中使用 var(–main-color)作为 color 或 background-color 的值。
3、使用 document.documentElement.style.setProperty(‘–main-color’, ‘#e91e63’) 修改变量值。
4、确保目标元素的样式规则中已引用该变量，否则修改无效，例如color: var(–main-color);。
五、使用 setAttribute 批量设置内联样式
该方法适用于需同时设置多个样式属性的场景，避免重复访问 style 对象，提升 代码可读性。
1、构造完整 CSS 声明字符串，例如 ”color: #4caf50; background-color: #e8f5e9;”。
2、调用 element.setAttribute(“style”, “color: #4caf50; background-color: #e8f5e9;”) 替换全部内联样式。
3、注意此操作会覆盖原有所有 style 属性，若需保留其他内联样式，应先读取再合并后写入。
4、为防止 XSS 风险，确保传入的颜色值经过校验，禁止直接插入用户输入内容，例如 不接受未过滤的 input.value 作为颜色值。
以上就是
