本文旨在解决通过 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： ID 选择器的数量。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 动态样式： 此方法仅能获取通过 标签或 引入的外部样式表中定义的 CSS 规则。它无法获取直接在元素 style 属性中定义的内联样式（例如
总结
通过遍历 document.styleSheets 并结合 CSS 特异性排序，我们可以有效地获取到元素某个 CSS 属性的原始声明值，而不是 getComputedStyle 返回的计算结果。虽然此方法比直接使用 getComputedStyle 更复杂，且存在一些限制，但它为需要深入分析或操作原始 CSS 规则的场景提供了一个有力的解决方案。在实际应用中，请权衡其性能开销和特定场景的需求，并考虑上述注意事项。
以上就是获取 CSS 原始值：绕过 getComputedStyle 的计算结果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532485.html
微信扫一扫
支付宝扫一扫
