CSS伪类与JS交互实用技巧

CSS伪元素（如::before、::after）因非DOM节点而无法被JavaScript直接操作，但可通过CSS变量、类名切换或动态style标签实现高效可控的交互；其中CSS变量方案最推荐——简洁、可动画、兼容性好，适合颜色、尺寸等动态样式；类名切换更稳健，适用于content变更或复杂状态组合；而动态插入style标签仅限极少数批量主题场景，需谨慎规避重复插入与优先级问题——三者并非替代关系，而是按需求复杂度递进的协同工具链。

伪元素样式无法直接用 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 变量、或重写