getcomputedstyle 返回只读的实时计算样式对象，反映最终渲染结果但不可修改；仅支持已挂载元素，伪元素需传入'::before'等标识；返回值为带单位字符串，非像素数值。
getComputedStyle 返回的是只读的 CSSStyleDeclaration 对象
getComputedStyle 不会返回内联样式对象，而是返回一个实时、只读的计算后样式集合。它反映的是浏览器最终渲染时应用的所有样式（包括继承、层叠、媒体查询生效后的结果），但你不能通过它修改样式——任何对返回对象属性的赋值都会静默失败。
常见错误是试图这样写：computed.width = '200px'，这完全无效，也不会报错，只会被忽略。
- 必须用
element.style.width或element.setAttribute('style', ...)修改样式 - 返回对象的属性名使用驼峰式（
backgroundColor），不是短横线（background-color） - 获取不到自定义属性（
--my-color），需用getPropertyValue('--my-color')
必须传入已挂载到 DOM 的元素
如果元素尚未插入文档（比如刚用 document.createElement 创建但没 appendChild），调用 getComputedStyle 会返回空样式或默认值（如 width: 'auto'、display: 'inline'），无法反映真实布局计算结果。
典型场景：在 Vue/React 的 mounted 或 useEffect 中调用是安全的；但在组件初始化阶段、或 Shadow DOM 尚未 attach 时直接调用，大概率拿不到预期值。
- 检查元素是否在 document 中：
element.isConnected === true - 若需测量尺寸，建议配合
offsetWidth/clientHeight交叉验证 - 对 display: none 的元素，部分浏览器仍可返回计算值，但 width/height 通常为 0
伪元素样式只能通过第二个参数指定
要获取 ::before 或 ::after 的样式，必须显式传入伪元素标识字符串作为第二个参数，否则返回主体元素样式。
const el = document.querySelector('#box');
const beforeStyle = getComputedStyle(el, '::before');
console.log(beforeStyle.content); // '"before content"'
console.log(beforeStyle.color); // 'red'
- 第二个参数必须是字符串
'::before'或'::after'（双冒号，单冒号不兼容现代标准） - 伪元素本身不存在 DOM 节点，所以无法用
querySelector获取，只能靠getComputedStyle - 若伪元素未渲染（如
content: none），返回的样式可能为空或含默认值
注意单位和计算值的“陷阱”
getComputedStyle 返回的几乎所有长度值都是带单位的字符串（如 '16px'、'2.5em'、'50%'），不会自动转成像素或数字。直接参与数学运算会出错。
比如 parseInt('16px') 得到 16，但 parseInt('2.5em') 只得 2，parseFloat('50%') 是 50 —— 这些都不是你想要的真实像素值。
- 需要像素值时，优先用
element.getBoundingClientRect()获取 layout 尺寸 - 必须解析字符串时，用
parseFloat+ 检查单位（cssText.includes('px')不可靠） - 百分比、em、rem 值依赖上下文，仅靠
getComputedStyle无法还原原始声明值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
