可通过操作 dom 元素的 style 属性动态修改文本或背景颜色，方法包括：一、直接修改内联样式；二、切换预定义 css 类；三、修改 CSS 自定义属性；四、用 getComputedStyle 读取并智能计算新颜色；五、通过 setAttribute 设置 style字符串。
如果您希望在html 5 页面中通过javaScript 动态修改元素的文本颜色或背景颜色，则可以通过操作 DOM 元素的 style 属性实现。以下是几种可行的操作方法：
一、直接修改内联样式
该方法通过 javascript 访问元素的 style对象，直接设置 color 或backgroundColor 属性，适用于单个元素的即时颜色切换。
1、使用 document.getElementById()获取目标元素。
2、设置元素。style.color = “red“ 以更改文字颜色。
立即学习 “ 前端免费学习笔记（深入）”；
3、设置元素。style.backgroundColor = “#00ff00″ 以更改背景颜色。
4、可将上述语句 封装 为函数，并通过按钮点击等 事件 触发。
二、切换预定义 CSS 类
该方法预先在 CSS 中定义多个颜色样式类，再通过 JavaScript 切换元素的 className 或 classlist，避免硬 编码 颜色值，便于维护和复用。
1、在
2、使用 element.className = “red-text green-bg” 整体替换类名。
3、或使用 element.classList.remove(“old-class”)与 element.classList.add(“new-class”)进行增量切换。
4、支持多次调用 classList.toggle(“active”)实现颜色状态的来回切换。
三、修改 CSS 自定义属性（CSS 变量）
该方法利用 CSS 自定义属性在：root 或父容器中声明颜色变量，再通过 JavaScript 修改变量值，从而批量影响所有引用该变量的元素。
1、在
2、在元素样式中使用 color: var(–text-color); background-color: var(–bg-color);。
3、通过 document.documentElement.style.setProperty(‘–text-color’, ‘blue’)更新变量值。
4、所有应用了 var(–text-color)的元素将自动响应颜色变化。
四、使用 getComputedStyle 读取并反向计算新颜色
该方法先获取当前颜色值，再基于 HSL 或亮度逻辑生成对比色或互补色，实现智能换色，适合需要动态适配场景。
1、调用 getComputedStyle(element).color 获取当前 color 值（可能为 rgb()、hex 或 named 形式）。
2、使用正则或 CSS.supports()配合 window.CSS.escape() 解析出 RGB 分量。
3、将 RGB 转换为 HSL，调整 H（色相）或 L（亮度）生成新颜色。
4、将新 HSL 值转回 RGB 字符串，并赋值给 element.style.color。
五、通过 setAttribute 修改 style 属性字符串
该方法将整个 style 属性作为字符串处理，适用于需一次性设置多个样式或兼容老旧运行环境的场景。
1、构造样式字符串，例如 ”color: orange; background-color: #333;”。
2、调用 element.setAttribute(“style”, “color: orange; background-color: #333;”)。
3、注意：此操作会覆盖原有全部内联样式，务必确保字符串包含所有需保留的样式项。
4、可先读取现有 style 值，再拼接新增内容，避免意外丢失其他内联样式。
以上就是
