本文旨在解决通过 JavaScript 获取 css 属性原始公式（如 `calc()` 表达式）而非其计算后像素值的问题。传统 `getComputedStyle` 方法仅返回最终计算结果，无法满足此需求。我们将深入探讨一种通过遍历样式表、匹配选择器并根据 CSS 特异性排序来提取原始 CSS 声明的解决方案，并提供详细代码示例及注意事项。
在前端开发中，我们经常需要获取元素的 CSS 样式信息。window.getComputedStyle() 方法是获取元素最终计算样式（computed style）的标准方式。然而，它返回的是浏览器解析并计算后的最终值，例如，height: calc(100vh – 305px) 可能会被计算为 “542.984375px”。对于某些场景，如动态调整或分析 CSS 规则时，我们可能需要获取其原始的、未计算的 CSS 值或公式，而 getComputedStyle 无法提供这一点。
挑战：获取 CSS 原始声明
当一个 CSS 属性值是动态的，例如使用 calc() 函数，或者是一个百分比值时，getComputedStyle 返回的总是其在当前视口和元素状态下的像素值。这使得我们无法直接获取到 calc(100vh – 305px) 这样的原始声明。为了解决这个问题，我们需要采取一种更底层的方法：直接检查应用于元素的 CSS 规则。
解决方案：遍历样式表并评估特异性
要获取元素的原始 CSS 声明，我们需要模拟浏览器解析 CSS 规则的过程。这包括以下几个步骤：
立即学习“前端免费学习笔记（深入）”；
- 遍历所有样式表： 访问 document.styleSheets 集合，获取页面中所有的 CSS 样式表。
- 遍历每个样式表中的规则： 对于每个样式表，访问其 cssRules 集合，获取其中定义的所有 CSS 规则。
- 匹配元素与选择器： 对于每个 CSS 规则，使用 Element.matches() 方法检查目标元素是否符合该规则的选择器 (selectorText)。
- 提取属性值： 如果元素匹配选择器，并且该规则定义了我们感兴趣的 CSS 属性，则提取其原始值。
- 根据特异性排序： 由于一个元素可能被多个 CSS 规则匹配，我们需要根据 CSS 特异性（Specificity）原则来确定哪个规则是最终生效的。特异性高的规则将覆盖特异性低的规则。
详细实现
我们将通过两个 JavaScript 函数来实现这一逻辑：findRule 用于查找并收集匹配的规则，以及 compare 用于计算并比较选择器的特异性。
1. findRule 函数：查找匹配的 CSS 规则
findRule 函数负责遍历所有样式表和规则，收集所有匹配目标元素的指定 CSS 属性及其原始值。
function findRule(elem, propertyName) { const foundRules = []; // 存储匹配到的规则及其选择器 // 遍历文档中所有的样式表 for (const { cssRules } of document.styleSheets) { // 遍历当前样式表中的所有CSS规则 for (const rule of cssRules) { // 确保是 CSSStyleRule 类型，因为它包含 selectorText 和 style if (rule instanceof CSSStyleRule) { const { style, selectorText } = rule; const value = style?.[propertyName]; // 获取原始属性值 // 如果属性存在且元素匹配该选择器，则将其加入到 foundRules if (value && elem.matches(selectorText)) { foundRules.push([selectorText, value]); } } } } // 根据CSS特异性对找到的规则进行排序 // 排序后，特异性最高的规则将位于数组的第一个位置 foundRules.sort(([selectorA], [selectorB]) => { // 使用 compare 函数判断哪个选择器更具特异性 const moreSpecificSelector = compare(selectorA, selectorB); // 如果 selectorA 更具特异性，则返回 -1 (A排在B前面) return moreSpecificSelector === selectorA ? -1 : 1; }); // 返回特异性最高的规则的属性值 return foundRules.length > 0 ? foundRules[0][1] : undefined; }
2. compare 函数：计算并比较选择器特异性
compare 函数接收两个选择器字符串，并根据 CSS 特异性规则判断哪个选择器更具特异性。CSS 特异性通常通过一个三元组 (A, B, C) 来表示：
特异性比较时，首先比较 A，然后是 B，最后是 C。
// 辅助函数：计算单个选择器的特异性分数 (A, B, C) function calculateSpecificity(selector) { let aRating = 0; // ID 选择器 let bRating = 0; // 类、属性、伪类选择器 let cRating = 0; // 元素、伪元素选择器 // 将选择器拆分为更小的部分进行分析 // 注意：这个简单的split可能无法处理所有复杂的css选择器，例如组合选择器中的空格 const selectorParts = selector.split(/[s>+~]/).filter(part => part.trim() !== ''); selectorParts.forEach(part => { // 统计 ID 选择器 (#) aRating += (part.split("#").length - 1); // 统计 类选择器 (.) bRating += (part.split(".").length - 1); // 统计 属性选择器 ([]) bRating += (part.split("[").length - 1); // 统计 伪类选择器 (:) - 简单的计数，不区分伪类和伪元素 bRating += (part.split(":").length - 1); // 这是一个简化，严格来说伪元素属于C // 统计 元素选择器 (非 # . [ : 开头的) if (!part.startsWith("#") && !part.startsWith(".") && !part.startsWith("[") && !part.startsWith(":")) { cRating += 1; } }); return [aRating, bRating, cRating]; } // 比较两个选择器的特异性，返回特异性更高的选择器字符串 function compare(selectorA, selectorB) { const [a1, b1, c1] = calculateSpecificity(selectorA); const [a2, b2, c2] = calculateSpecificity(selectorB); // 逐级比较特异性 if (a1 > a2) return selectorA; if (a2 > a1) return selectorB; if (b1 > b2) return selectorA; if (b2 > b1) return selectorB; if (c1 > c2) return selectorA; if (c2 > c1) return selectorB; // 如果特异性完全相同，则按CSS规则，后声明的优先 // 但在这个函数中，我们只是比较特异性，不考虑声明顺序 // 在 sort 函数中，如果特异性相同，原始顺序会被保留或根据浏览器实现 return selectorA; // 默认返回第一个，表示特异性相同 }
注意： 上述 calculateSpecificity 函数中的伪类/伪元素计数是一个简化版本。在严格的 CSS 特异性规则中，伪类属于 B 级，伪元素属于 C 级。对于 selectorParts 的拆分也相对基础，对于 div p 或 div > p 这样的复杂选择器，可能需要更精细的解析。然而，对于大多数常见场景，此实现已足够。
示例 CSS 和 html
为了测试上述功能，我们使用以下 CSS 和 HTML 结构：
CSS 样式：
div { width: 100%; border: 1px solid #777; } div.test { width: calc(100vw - 100px); /* 更具体的规则 */ } .test { background: #aaa; width: 300px; /* 较不具体的规则 */ }
HTML 结构：
<div class='test'>这是一个测试元素</div>
使用示例
现在，我们可以通过 findRule 函数来获取 .test 元素 width 属性的原始 CSS 值：
// 获取 class 为 'test' 的元素 const testElement = document.querySelector('.test'); // 调用 findRule 函数获取 'width' 属性的原始值 const originalWidth = findRule(testElement, 'width'); console.log(originalWidth); // 预期输出: "calc(100vw - 100px)"
注意事项与限制
- 内联样式和 JavaScript 动态样式： 此方法仅能获取通过 <style> 标签或 <link> 引入的外部样式表中定义的 CSS 规则。它无法获取直接在元素 style 属性中定义的内联样式（例如 <div style=”width: 200px;”>），也无法获取通过 JavaScript 直接设置 element.style.width = ‘…’ 的样式。这些样式的特异性通常高于任何选择器规则。
- !important 规则： 此实现未考虑 !important 规则。!important 具有最高的优先级，会覆盖所有非 !important 规则，无论特异性如何。
- 性能考量： 遍历所有样式表和其中的所有规则可能是一个计算密集型操作，尤其是在样式表数量庞大或规则非常多的页面上。不建议在性能敏感的循环中频繁调用此函数。
- 伪类/伪元素： calculateSpecificity 对伪类和伪元素的处理相对简化。在更复杂的场景中，可能需要一个更健壮的 CSS 选择器解析器来准确计算特异性。
- 浏览器兼容性： document.styleSheets 和 CSSStyleRule 等 API 在现代浏览器中普遍支持，但老旧浏览器可能存在兼容性问题。
- 样式表加载时机： 确保在所有样式表都已加载并解析完成后再执行此操作，否则可能无法获取到完整的 CSS 规则。
总结
通过遍历 document.styleSheets 并结合 CSS 特异性排序，我们可以有效地获取到元素某个 CSS 属性的原始声明值，而不是 getComputedStyle 返回的计算结果。虽然此方法比直接使用 getComputedStyle 更复杂，且存在一些限制，但它为需要深入分析或操作原始 CSS 规则的场景提供了一个有力的解决方案。在实际应用中，请权衡其性能开销和特定场景的需求，并考虑上述注意事项。