window.getcomputedstyle 默认拿不到伪元素样式，因为伪元素（如::before、::after）不是真实dom节点，必须显式传入第二个参数（如"::before"）才能获取其计算样式，且目标元素需已挂载并可见。
为什么 window.getComputedStyle 默认拿不到伪元素样式
因为伪元素（如 ::before、::after）本身不是 DOM 节点，getComputedStyle 必须显式指定第二个参数才能访问它们。直接传入元素节点，返回的是该元素自身的样式，不包含伪元素渲染后的计算值。
常见错误现象：调用 getComputedStyle(el) 后查 content、color 或 width 字段为空或默认值，实际页面里伪元素明明显示出来了。
- 必须传入字符串
"::before"或"::after"作为第二个参数（注意双冒号语法，单冒号:before在现代浏览器中已不被支持） - 目标元素必须已挂载到文档中且已触发样式计算（比如不在
display: none或visibility: hidden状态下） - 若伪元素依赖于 CSS 的
content属性（如content: "•";），但该属性值为none或空字符串，返回的CSSStyleDeclaration仍是合法对象，但多数属性无意义
getComputedStyle 获取 ::before 样式的完整写法
关键就是第二个参数不能省略，且必须精确匹配伪元素类型。以下是一个可直接复用的函数片段：
function getPseudoStyle(el, pseudo = '::before') {
if (!el || !['::before', '::after'].includes(pseudo)) return null;
try {
return window.getComputedStyle(el, pseudo);
} catch (e) {
// Safari 旧版本可能抛错，fallback 到空对象
return new CSSStyleDeclaration();
}
}
// 使用示例
const editorEl = document.querySelector('#my-editor');
const beforeStyle = getPseudoStyle(editorEl, '::before');
console.log(beforeStyle.content); // '"•"' 或 'none'
console.log(beforeStyle.color); // 计算后的颜色值，如 'rgb(102, 102, 102)'
注意：content 返回的是带引号的字符串（如 "'text'" 或 "none"），需用 JSON.parse 或正则清理；而 color、font-size 等返回的是最终计算值（如 rgb(…)、16px），无需额外转换。
HTML 编辑器场景下的特殊问题与绕过方式
富文本编辑器（如 contenteditable 元素）常通过伪元素实现占位符（placeholder）、光标装饰、行号等 UI，但这些伪元素样式容易受编辑状态影响：
- 编辑器内容为空时才显示
::before占位符 → 需先判断el.textContent.trim() === ''再取样式，否则返回的content可能是none - 某些编辑器用
data-placeholder控制显隐，CSS 中写成[data-placeholder="true"]::before→ 必须确保对应属性存在且值匹配，否则getComputedStyle返回空样式 - Shadow DOM 内部的编辑器（如自定义元素封装）无法跨 shadow boundary 获取伪元素样式 → 此时需在 shadow root 内部调用
getComputedStyle，外部调用无效
性能与兼容性提醒
每次调用 getComputedStyle 都会触发强制重排（reflow），在高频操作（如输入监听、滚动）中直接调用会导致卡顿。
- 不要在
input或keydown事件里反复调用，应做节流或仅在必要时机（如初始化、状态切换后）获取一次 - IE11 支持
:before（单冒号），但不支持::before；若需兼容，可 fallback 到getComputedStyle(el, ':before')，但现代项目建议直接放弃 IE - Firefox 对
content的返回格式与其他浏览器略有差异（如是否保留转义），建议统一用String(content).replace(/^["']|["']$/g, '')提取原始值
伪元素样式不是“实时”的——它只反映当前计算快照，不会自动响应后续 CSS 变更；想监听变化，得靠 MutationObserver 监听 <style></style> 或 class 切换，再手动重取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
