当需要获取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免费学习笔记（深入）”；
访问所有样式表： 获取文档中所有 标签和 引入的样式表。遍历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结构
获取CSS原始值示例 /* 示例CSS样式 */ div { width: 100%; border: 1px solid #777; } div.test { width: calc(100vw - 100px); /* 原始声明值 */ } .test { background: #aaa; width: 300px; /* 较低特异性的声明 */ }这是一个测试元素// 将 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" });
在上述示例中，div.test 的 width 属性被声明为 calc(100vw – 100px)，而 .test 也声明了 width: 300px。由于 div.test 的选择器特异性高于 .test，findRule 函数将正确返回 calc(100vw – 100px)。
局限性与注意事项
尽管这种方法能够解决获取CSS原始声明值的需求，但它也存在一些局限性：
性能开销： 遍历 document.styleSheets 和其中的所有 cssRules 可能会导致显著的性能开销，尤其是在大型或样式复杂的页面上。应谨慎使用，避免在性能敏感的场景中频繁调用。动态样式： 此方法主要适用于在 标签或外部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() 仍是获取元素最终样式的首选方法，但当需要原始定义时，本文提供的方法提供了一个可行的解决方案。
以上就是在JavaScript中获取CSS原始声明值（如calc()）而非计算结果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532430.html
微信扫一扫 
支付宝扫一扫 
