本文旨在解决通过 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 结构：
这是一个测试元素
使用示例
现在，我们可以通过 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 动态样式： 此方法仅能获取通过
- !important 规则： 此实现未考虑 !important 规则。!important 具有最高的优先级，会覆盖所有非 !important 规则，无论特异性如何。
- 性能考量： 遍历所有样式表和其中的所有规则可能是一个计算密集型操作，尤其是在样式表数量庞大或规则非常多的页面上。不建议在性能敏感的循环中频繁调用此函数。
- 伪类/伪元素： calculateSpecificity 对伪类和伪元素的处理相对简化。在更复杂的场景中，可能需要一个更健壮的 CSS 选择器解析器来准确计算特异性。
- 浏览器兼容性： document.styleSheets 和 CSSStyleRule 等 API 在现代浏览器中普遍支持，但老旧浏览器可能存在兼容性问题。
- 样式表加载时机： 确保在所有样式表都已加载并解析完成后再执行此操作，否则可能无法获取到完整的 CSS 规则。
总结
通过遍历 document.styleSheets 并结合 CSS 特异性排序，我们可以有效地获取到元素某个 CSS 属性的原始声明值，而不是 getComputedStyle 返回的计算结果。虽然此方法比直接使用 getComputedStyle 更复杂，且存在一些限制，但它为需要深入分析或操作原始 CSS 规则的场景提供了一个有力的解决方案。在实际应用中，请权衡其性能开销和特定场景的需求，并考虑上述注意事项。
