伪元素样式无法直接用JavaScript修改，因其非DOM节点；可通过CSS变量、切换类名或动态修改style标签间接控制，推荐优先使用CSS变量方案。
伪元素样式无法直接用 JavaScript 修改
CSS 伪元素（如 ::before、::after）本身不是 DOM 节点，JavaScript 拿不到它们的引用，所以不能像操作 element.style.color 那样直接改 element::before 的 content 或 background-color。
常见错误现象：document.querySelector('.btn').style.setProperty('content', '"new"') 完全无效；或者试图用 getComputedStyle(el, '::before') 读取后赋值，但赋值那步根本没地方写。
- 真正能读：用
getComputedStyle(el, '::before')可以读取计算后的样式值（只读） - 真正能改：只能间接——通过切换 CSS 类、修改 CSS 变量、或重写
<style></style>标签内容 - 性能注意：频繁操作
<style></style>标签会触发重排，不如预设类名 +classList.toggle()
用 CSS 自定义属性（CSS 变量）桥接 JS 和伪元素
这是目前最干净、兼容性足够（Chrome 49+、Firefox 31+、Safari 9.1+）、且支持动画的方式。核心思路是：把要动态控制的样式值抽成 --icon-color 这类变量，在伪元素里用 var(--icon-color) 引用，JS 只需改父元素上的变量值。
示例场景：按钮悬停时让 ::after 显示不同颜色的下划线
button {
--underline-color: #007bff;
}
button::after {
content: '';
display: block;
height: 2px;
background-color: var(--underline-color);
}
- JS 修改方式：
btn.style.setProperty('--underline-color', '#dc3545') - 必须作用在伪元素的“宿主元素”上（即写
::after的那个选择器对应的真实元素） - 不要漏掉双短横线前缀，
setProperty('underline-color', ...)是错的，必须是'--underline-color' - IE 不支持 CSS 变量，如果必须兼容 IE，得 fallback 到 class 切换方案
用 class 切换控制多套伪元素样式
当变量不够用（比如要换 content 字符串、改 transform 或切换整套布局），就得预设好多个 class，用 JS 控制开关。这是最兼容、最可控的方式。
典型错误：写一堆内联 style 覆盖伪元素，结果发现完全不生效；或者用 setAttribute('class', '...') 覆盖全量 class，意外清掉了其他必要 class。
- 推荐用
element.classList.add()/.remove()/.toggle()精准操作 - CSS 中每个状态单独写，例如：
.btn.state-loading::before { content: '⏳'; }、.btn.state-success::before { content: '✓'; } - 避免在 class 名里塞语义过强的词（如
.btn-red），优先用功能型命名（.btn--loading） - 如果状态组合多（比如 loading + disabled），别硬凑复合 class，改用数据属性更清晰：
button[data-status="loading"][data-disabled="true"]::before
动态插入
极少数场景需要运行时生成大量伪元素样式（比如主题引擎实时渲染几十种图标色），这时可操作 <style></style> 标签内容。但它不是首选，容易失控。
容易踩的坑：
- 重复插入导致样式表膨胀：每次都要先查
document.getElementById('dynamic-styles')，存在就更新.textContent，不存在才新建 - 插入位置影响优先级：新
<style></style>放在最后，才能覆盖前面的规则；但若页面有!important，依然可能被压住 - 字符串拼接易出错：比如忘记转义单引号，
content: '"'+text+'"中 text 含单引号就会崩掉 CSS 解析 - 服务端渲染（SSR）下，客户端插入的
<style></style>可能和初始 HTML 冲突，需同步清除旧规则
伪元素和 JS 的交界处，从来不是“能不能改”，而是“用哪一层抽象去改”。变量、class、style 标签三者不是替代关系，是按复杂度递进的工具链——简单状态用变量，明确状态用 class，动态批量用 style。选错一层，后面全是补丁。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
