window.getcomputedstyle() 可通过传入第二个参数 ":before" 或 ":after" 读取伪元素样式，返回只读 cssstyledeclaration 对象；content 值带双引号，颜色尺寸为计算后格式（如 rgb()、px），伪元素需有非空 content 才能确保样式可读。
window.getComputedStyle() 本身不能直接获取伪元素（::before、::after）的样式，因为它只作用于真实 DOM 节点。但可以通过传入第二个参数（伪元素标识字符串）来间接获取——这是它的隐藏能力。
必须指定伪元素名称作为第二个参数
调用语法为：window.getComputedStyle(element, pseudoElt)，其中 pseudoElt 是字符串 ":before" 或 ":after"（注意是单冒号写法，兼容旧规范，现代浏览器均支持）。
- 即使 CSS 中写的是
::before（双冒号），JS 中仍需传":before" - 若伪元素不存在（如未定义
content），返回的CSSStyleDeclaration对象仍存在，但多数属性值为""或默认值（如color: "rgb(0, 0, 0)"） - 必须确保目标元素已渲染且伪元素已生效（例如
content不为空字符串或none）
关键限制：只能读取计算后样式，不能修改
getComputedStyle() 返回只读对象，无法赋值。伪元素样式只能通过修改其宿主元素的类名、style 属性或动态插入 CSS 规则来变更。
- 常见误区：试图用
computedStyle.color = "red"修改 —— 会静默失败 - 想动态控制伪元素颜色？可切换预设 class：
element.classList.toggle("has-red-before")，并在 CSS 中定义.has-red-before::before { color: red; } - 运行时注入样式表也可行，但更重，适合复杂场景
实用示例：读取 ::before 的 content 和 color
假设 HTML 有 <div id="target"></div>，CSS 定义：
JS 获取方式：
const el = document.getElementById("target");
const beforeStyles = window.getComputedStyle(el, ":before");
console.log(beforeStyles.content); // '"★ "'（带引号和空格）
console.log(beforeStyles.color); // 'rgb(255, 107, 107)'
console.log(beforeStyles.fontSize); // '14px'
-
content值始终带英文双引号（即使 CSS 里没写），需用.slice(1, -1)去掉 - 颜色、尺寸等单位值均为计算后格式（如
rgb()、px），非原始 CSS 值 - 若伪元素被
display: none隐藏，大部分属性仍可读取，但布局相关属性（如width、height）通常为"0px"
兼容性与注意事项
该用法在所有现代浏览器（Chrome、Firefox、Safari、Edge）中稳定支持，IE8+ 也支持（但 IE8 仅支持单冒号 :before）。
- 务必检查元素是否存在且已挂载到文档中，否则
getComputedStyle抛错 - 伪元素依赖
content属性；若 CSS 中content: ""或content: none，部分浏览器可能不触发渲染，导致样式不可读 - 动画中的伪元素属性（如
transform）可读取当前帧值，但需注意重排时机，必要时配合requestAnimationFrame
