当需要获取css属性的原始声明值（例如 `calc()` 或 `var()` 函数）而非其最终计算结果时，`window.getcomputedstyle()` 方法不再适用。本文将深入探讨一种通过遍历样式表、匹配选择器并根据css特异性规则识别最相关声明的javascript方法，从而精确获取元素css属性的原始定义，尤其适用于处理动态计算值和css变量的场景。
引言：为何getComputedStyle不足以满足需求？
在Web开发中，我们经常需要通过javaScript访问和操作元素的CSS属性。window.getComputedStyle() 方法是获取元素最终计算样式（即浏览器解析并应用所有CSS规则后得到的样式）的标准途径。例如，如果一个元素的 height 属性被定义为 calc(100vh – 305px)，getComputedStyle(element).getPropertyValue(‘height’) 将返回一个具体的像素值，如 “542.984375px”，而不是原始的 calc() 表达式。
这种行为在大多数情况下是有益的，因为它提供了元素在页面上实际渲染的最终尺寸。然而，在某些特定场景下，我们可能需要获取CSS属性的原始声明值，例如：
- 调试和分析： 了解CSS属性是如何被定义的，而不是它最终计算出的结果。
- 动态主题或配置： 如果CSS属性使用了 var() 函数，我们可能需要获取变量名，而不是变量的最终值。
- 自定义CSS处理器： 在构建某些工具或库时，可能需要解析原始的 calc() 或其他函数表达式。
由于浏览器在提供计算样式时已经完成了所有表达式的解析，因此无法通过 getComputedStyle 获取原始声明。这要求我们采取一种不同的策略：直接检查文档中的样式表。
解决方案：遍历样式表与特异性排序
要获取CSS属性的原始声明值，我们需要模拟浏览器解析CSS规则的过程。这包括以下核心步骤：
立即学习“Java免费学习笔记（深入）”；
- 访问所有样式表： 获取文档中所有 <style> 标签和 <link rel=”stylesheet”> 引入的样式表。
- 遍历CSS规则： 检查每个样式表中的所有CSS规则。
- 匹配元素选择器： 对于每个规则，判断其选择器是否与目标元素匹配。
- 提取属性值： 如果选择器匹配，则提取该规则中对应CSS属性的原始值。
- 应用CSS特异性： 由于一个元素可能被多个CSS规则匹配，我们需要根据CSS特异性（Specificity）规则来确定哪个规则的声明是最终生效的。
javascript实现：findRule 函数
以下是一个实现上述逻辑的JavaScript函数 findRule。它接收一个dom元素和要查找的CSS属性名，并返回该属性的原始声明值。
/** * 查找元素特定CSS属性的原始声明值。 * @param {htmlElement} elem - 目标DOM元素。 * @param {string} name - 要查找的CSS属性名。 * @returns {string|undefined} 属性的原始声明值，如果未找到则返回 undefined。 */ function findRule(elem, name) { const found = []; // 遍历文档中的所有样式表 for (const { cssRules } of document.styleSheets) { // 遍历当前样式表中的所有CSS规则 for (const rule of cssRules) { // 确保规则有 style 属性和 selectorText (如 CSSStyleRule) if (rule.style && rule.selectorText) { const value = rule.style[name]; // 获取原始声明值 // 如果属性存在且元素的选择器匹配该规则 if (value && elem.matches(rule.selectorText)) { found.push([rule.selectorText, value]); } } } } // 根据CSS特异性对找到的规则进行排序 // compare 函数将决定哪个选择器更具体 found.sort(([selectorA], [selectorB]) => { const moreSpecificSelector = compare(selectorA, selectorB); // 如果 selectorA 更具体，则它应该排在前面 (-1) // 否则 selectorB 更具体，或者两者相同，selectorB 应该排在前面 (1) return moreSpecificSelector === selectorA ? -1 : 1; }); // 返回特异性最高的规则的属性值 return found.length > 0 ? found[0][1] : undefined; }
CSS特异性比较：compare 函数
findRule 函数的核心在于 compare 函数，它负责根据CSS特异性规则比较两个选择器，并返回特异性更高的选择器。CSS特异性通常通过计算选择器中ID选择器、类选择器（包括属性选择器和伪类）和类型选择器（标签名和伪元素）的数量来确定。
以下是 compare 函数的实现，它是一个简化的特异性计算器，主要关注ID、类和标签选择器：
/** * 比较两个css选择器的特异性，返回特异性更高的选择器。 * 注意：这是一个简化的特异性计算器，不涵盖所有CSS特异性规则。 * @param {string} selectorA - 第一个CSS选择器字符串。 * @param {string} selectorB - 第二个CSS选择器字符串。 * @returns {string} 特异性更高的选择器字符串。 */ function compare(selectorA, selectorB) { // 辅助函数：计算选择器的特异性评分 [ID, Class, Tag] const calculateSpecificity = (selector) => { let rating = [0, 0, 0]; // [ID, Class/Pseudo-class/Attribute, Tag/Pseudo-element] // 简化处理：将选择器按空格分割，然后检查每个部分 // 注意：这可能不完全准确，因为选择器可以更复杂 const items = selector.split(/[s>+~]/); // 简单地按组合器分割 items.forEach((item) => { if (item.includes('#')) { rating[0] += (item.split('#').length - 1); // 计算ID选择器数量 } if (item.includes('.')) { rating[1] += (item.split('.').length - 1); // 计算类选择器数量 } // 检查是否是标签选择器，同时排除ID和类选择器 if (!item.startsWith('#') && !item.startsWith('.') && item.length > 0) { // 进一步排除伪类、属性选择器等 if (!item.includes('[') && !item.includes(':')) { rating[2] += 1; // 计算标签选择器数量 } } }); return rating; }; const aRating = calculateSpecificity(selectorA); const bRating = calculateSpecificity(selectorB); // 逐级比较特异性：ID > Class > Tag if (aRating[0] > bRating[0]) { return selectorA; } else if (bRating[0] > aRating[0]) { return selectorB; } if (aRating[1] > bRating[1]) { return selectorA; } else if (bRating[1] > aRating[1]) { return selectorB; } if (aRating[2] > bRating[2]) { return selectorA; } else if (bRating[2] > aRating[2]) { return selectorB; } // 如果所有特异性级别都相同，则通常是后声明的规则生效。 // 在本例中，我们简单地返回 selectorA，因为 sort 函数会处理相等情况下的相对顺序。 // 实际的浏览器行为会考虑声明顺序，这里我们假设在相等情况下，排序算法的稳定性足够。 return selectorA; }
注意事项：
- 上述 compare 函数是一个简化的特异性计算器。它能够处理常见的ID、类和标签选择器。然而，CSS特异性规则非常复杂，包括属性选择器 [attr]、伪类 :hover、伪元素 ::before、!important 规则、内联样式以及不同组合器（如 +, ~, >）的影响。对于需要完全准确特异性计算的场景，可能需要一个更健壮的库或自定义实现。
- 在 calculateSpecificity 函数中，item.split(/[s>+~]/) 是一种简化的选择器分割方式，可能无法正确处理所有复杂的选择器组合。
完整示例
为了演示上述代码的用法，我们创建一个简单的HTML结构和CSS样式。
HTML结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取CSS原始值示例</title> <style> /* 示例CSS样式 */ div { width: 100%; border: 1px solid #777; } div.test { width: calc(100vw - 100px); /* 原始声明值 */ } .test { background: #aaa; width: 300px; /* 较低特异性的声明 */ } </style> </head> <body> <div class='test'>这是一个测试元素</div> <script> // 将 findRule 和 compare 函数放在这里，或者引入外部js文件 // ... (上面提供的 findRule 和 compare 代码) ... // 示例用法 document.addEventListener('DOMContentLoaded', () => { const testElement = document.querySelector('.test'); // 使用 getComputedStyle 获取计算值 const computedWidth = window.getComputedStyle(testElement).getPropertyValue('width'); console.log("计算后的宽度 (getComputedStyle):", computedWidth); // 例如: "1234.56px" // 使用 findRule 获取原始声明值 const originalWidth = findRule(testElement, 'width'); console.log("原始声明的宽度 (findRule):", originalWidth); // 预期: "calc(100vw - 100px)" // 另一个属性，例如 background const originalBackground = findRule(testElement, 'background'); console.log("原始声明的背景 (findRule):", originalBackground); // 预期: "#aaa" }); </script> </body> </html>
在上述示例中，div.test 的 width 属性被声明为 calc(100vw – 100px)，而 .test 也声明了 width: 300px。由于 div.test 的选择器特异性高于 .test，findRule 函数将正确返回 calc(100vw – 100px)。
局限性与注意事项
尽管这种方法能够解决获取CSS原始声明值的需求，但它也存在一些局限性：
- 性能开销： 遍历 document.styleSheets 和其中的所有 cssRules 可能会导致显著的性能开销，尤其是在大型或样式复杂的页面上。应谨慎使用，避免在性能敏感的场景中频繁调用。
- 动态样式： 此方法主要适用于在 <style> 标签或外部CSS文件中定义的样式。它无法获取通过 element.style.setProperty() 或直接设置 element.style.propertyName 添加的内联样式，因为这些样式不属于 document.styleSheets。
- !important 规则： 当前的 compare 函数没有考虑 !important 规则，而 !important 具有最高的优先级。如果需要处理这种情况，compare 函数需要进一步增强。
- Shadow DOM： 如果元素位于 Shadow DOM 内部，其样式可能被封装，并且无法通过 document.styleSheets 直接访问。
- 跨浏览器兼容性： document.styleSheets 和 cssRules API 在现代浏览器中普遍支持，但对于一些老旧浏览器或特定的CSS规则类型，可能存在细微差异。
- 伪类/伪元素： elem.matches() 方法可以处理伪类（如 :hover），但对于伪元素（如 ::before）则无法直接匹配。此方法主要针对直接应用于元素的样式。
总结
通过直接遍历文档的样式表并结合CSS特异性规则，我们可以有效地获取到CSS属性的原始声明值，而非浏览器计算后的结果。这对于需要深入了解CSS定义、处理 calc() 或 var() 等动态表达式的场景非常有价值。然而，开发者在使用此方法时应充分考虑其性能影响和上述局限性，并根据具体需求调整特异性比较逻辑。在大多数情况下，getComputedStyle() 仍是获取元素最终样式的首选方法，但当需要原始定义时，本文提供的方法提供了一个可行的解决方案。