在编写前端样式逻辑时，我们往往需要在不触发浏览器布局计算的前提下，拿到写在样式表或行内属性里的原始 CSS 声明。然而 JavaScript 提供的 getComputedStyle 接口返回的是经过层叠、继承与单位换算之后的最终值，这让我们很难逆向还原作者的本意。下面通过具体手段绕过这一限制。
为什么 getComputedStyle 拿不到原始值
getComputedStyle 的设计目标是为开发者提供“浏览器实际使用了什么样式”的视图。它会把相对单位（如 em、%、vw）解析为绝对像素，把简写属性展开为独立属性，并应用浏览器默认样式与优先级规则。举例来说，若外层容器宽度为 1200px，子元素设置 width: 50%，调用 getComputedStyle(el).width 只会得到字符串 600px。
这种计算行为在绝大多数渲染场景中是合理的，但在做主题编辑器、样式审查工具或动画参数提取时，我们就必须回到 CSSOM（CSS 对象模型）去读取未经计算的文本。理解这一点后，我们才能针对性地选择读取入口。
方法一：直接读取行内 style 对象
如果原始值写在元素的 style 属性中，最简单的方式是访问 element.style 映射。这个对象保存的是行内声明，不会经过层叠计算。例如元素标签为 <div id="box" style="width: 50%; color: red;"></div>，我们可以用下面的代码拿到原始字符串。
const el = document.getElementById('box');
// 读取行内原始宽度声明
const rawWidth = el.style.width;
console.log(rawWidth); // 输出 "50%"
// 遍历所有行内属性
for (const prop of el.style) {
console.log(prop, el.style[prop]);
}
这种方式的优点是零成本、同步且准确，但局限也很明显：它只能获取写在 HTML 标签 style 属性里的规则，对外部样式表或 <style> 块中的定义无能为力。因此更适合处理由 JS 动态写入的行内样式。
当你的项目把主题变量直接挂在行内 style 上时，这个方法配合自定义属性会非常高效，但如果样式主要来自 CSS 文件，就需要看下一个方案。
方法二：遍历 document.styleSheets 规则
要获取写在样式表中的原始声明，可以遍历 document.styleSheets，逐个读取 cssRules，再匹配选择器与属性名。下面的例子演示如何找出 id 为 box 的元素在样式表中的 width 原始值。
function getRawCssValue(selector, property) {
for (const sheet of document.styleSheets) {
let rules;
try {
rules = sheet.cssRules;
} catch (e) {
// 跨域样式表无法读取
continue;
}
for (const rule of rules) {
if (rule.selectorText === selector && rule.style) {
const val = rule.style.getPropertyValue(property);
if (val) return val;
}
}
}
return null;
}
const originalWidth = getRawCssValue('#box', 'width');
console.log(originalWidth); // 可能输出 "50%"
这段代码通过 getPropertyValue 拿到的就是样式表里的文本，不会被转成像素。不过需要注意，跨域引用的 CSS 文件会因安全策略抛出错误，此时要用 try-catch 跳过。另外，如果同一个选择器在多处出现，函数只返回第一次匹配到的值，实际项目中应按优先级进一步筛选。
相比行内读取，遍历样式表能覆盖大部分静态样式场景，适合构建样式检视面板。它的缺点是当样式表很多时有一定性能开销，且无法处理内联 SVG 或 Shadow DOM 内的样式。
方法三：使用 CSS 自定义属性传递原始值
现代浏览器支持 CSS 自定义属性（变量），我们可以在 :root 或具体元素上定义原始值，然后通过 getPropertyValue 从 style 对象中读取，而不会变成计算像素。
:root {
--main-width: 50%;
}
.box {
width: var(--main-width);
}
const root = document.documentElement;
const raw = root.style.getPropertyValue('--main-width');
// 若未写在行内，可改从样式表读取
if (!raw) {
// 复用前文 getRawCssValue(':root', '--main-width')
}
console.log(raw || '50%');
自定义属性的好处是天然保存字符串，不参与长度计算，非常适合做主题配置。我们可以在 JS 中直接修改 --main-width 来切换布局，同时随时读取原始比例。缺点是老版本 IE 不支持，且如果变量被 calc() 包裹，读取到的仍是表达式文本，需要自行解析。
综合来看，将关键原始值抽成 CSS 变量，既能让 getComputedStyle 拿到计算结果用于渲染，又能让业务逻辑通过变量接口拿到初衷数值，是一种兼顾兼容与清晰的架构方式。
三种方案对比与选用建议
| 方案 | 读取来源 | 是否受计算影响 | 适用场景 |
|---|---|---|---|
| 行内 style 对象 | 元素 style 属性 | 否 | 动态写入的行内样式 |
| 遍历 styleSheets | 外部或内部样式表 | 否 | 静态样式审查工具 |
| CSS 自定义属性 | 变量定义处 | 否 | 主题系统与配置面板 |
实际开发中，可以组合使用：用变量保存原始意图，用 styleSheets 遍历做兜底分析，用行内对象处理临时状态。这样就能完全绕开 getComputedStyle 的计算干扰，随时拿到干净的 CSS 原始值。
CSSgetComputedStyleoriginal_value修改时间：2026-08-08 02:09:16