当需要获取css属性的原始定义值（如`calc()`表达式）而非浏览器计算后的像素值时，标准`window.getcomputedstyle()`方法无法满足需求。本文将介绍一种通过遍历文档样式表、匹配元素选择器并根据css特异性排序来准确获取元素css属性原始定义值的方法，从而解决`calc()`等表达式被自动计算的问题。
在前端开发中，我们经常需要通过JavaScript来读取元素的CSS样式。最常用的方法是使用window.getComputedStyle(element).getPropertyValue(‘property-name’)。然而，这个方法有一个重要的局限性：它返回的是浏览器已经计算好的最终值，而非CSS规则中定义的原始值。例如，如果一个元素的宽度被定义为width: calc(100vw – 305px)，getComputedStyle会返回一个具体的像素值（如”542.984375px”），而不是原始的”calc(100vw – 305px)”表达式。这在某些需要动态修改或分析原始CSS表达式的场景下会造成困扰。
解决思路：遍历样式表与特异性匹配
要获取CSS属性的原始定义值，我们不能依赖已计算的样式。相反，我们需要直接检查文档中所有的CSS样式规则，找出适用于目标元素的规则，并根据CSS特异性（Specificity）原则确定哪个规则是最终生效的。
具体步骤如下：
遍历所有样式表： 访问document.styleSheets集合，获取页面中加载的所有CSS样式表。遍历样式规则： 对于每个样式表，遍历其内部的cssRules（CSSRuleList），这些规则包含了选择器和对应的样式声明。匹配元素选择器： 对于每个样式规则，使用Element.matches()方法检查当前规则的选择器是否与目标元素匹配。收集匹配规则： 如果规则匹配且包含目标CSS属性，则将选择器文本和原始属性值存储起来。根据特异性排序： 对收集到的所有匹配规则，按照CSS特异性从高到低进行排序。特异性最高的规则将是最终生效的规则。返回最高特异性规则的值： 返回排序后第一个规则的属性值，即为我们所需的原始CSS定义值。
核心实现：findRule 函数
以下是实现这一逻辑的JavaScript函数：
立即学习“Java免费学习笔记（深入）”；
/** * 查找元素某个CSS属性的原始定义值。 * @param {Element} elem - 目标DOM元素。 * @param {string} name - 要查找的CSS属性名（如 'width', 'height'）。 * @returns {string|undefined} - 原始CSS属性值，如果未找到则返回 undefined。 */function findRule(elem, name) { const foundRules = []; // 遍历文档中所有的样式表 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)) { foundRules.push([rule.selectorText, value]); } } } } // 如果没有找到任何匹配的规则，则返回 undefined if (foundRules.length === 0) { return undefined; } // 根据CSS特异性对找到的规则进行排序 // compare函数将返回特异性更高的选择器 foundRules.sort(([selectorA], [selectorB]) => { const moreSpecificSelector = compareSpecificity(selectorA, selectorB); // 如果selectorA更具体，则selectorA应该排在selectorB前面（返回-1） return moreSpecificSelector === selectorA ? -1 : 1; }); // 返回特异性最高的规则的属性值 return foundRules[0][1];}
CSS特异性比较：compareSpecificity 函数
CSS特异性决定了当多个规则应用于同一元素时，哪个规则的样式会生效。特异性通常通过计算选择器中ID、类/属性/伪类和元素/伪元素出现的次数来确定。以下是用于比较两个选择器特异性的辅助函数：
/** * 比较两个CSS选择器的特异性。 * 返回特异性更高的选择器字符串。 * @param {string} selectorA - 第一个选择器。 * @param {string} selectorB - 第二个选择器。 * @returns {string} - 特异性更高的选择器。 */function compareSpecificity(selectorA, selectorB) { // 辅助函数：计算单个选择器的特异性评分 [ID, Class/Attribute/Pseudo-class, Element/Pseudo-element] const calculateRating = (selector) => { let idCount = 0; let classCount = 0; let elementCount = 0; // 分割选择器以处理复合选择器，但这里简化处理，直接按空格分割 // 更准确的特异性计算需要更复杂的解析器来处理组合器、伪类等 const items = selector.split(/[s>+~]/); // 简单分割，可能不完全准确，但对常见情况有效 items.forEach((item) => { if (item.includes('#')) { idCount += item.split('#').length - 1; } if (item.includes('.')) { classCount += item.split('.').length - 1; } // 排除ID和类选择器，剩余的可能是元素选择器 if (!item.startsWith('#') && !item.startsWith('.') && item.trim() !== '') { elementCount += 1; } }); return [idCount, classCount, elementCount]; }; const ratingA = calculateRating(selectorA); const ratingB = calculateRating(selectorB); // 逐级比较特异性：ID > Class > Element if (ratingA[0] > ratingB[0]) { return selectorA; } else if (ratingB[0] > ratingA[0]) { return selectorB; } if (ratingA[1] > ratingB[1]) { return selectorA; } else if (ratingB[1] > ratingA[1]) { return selectorB; } if (ratingA[2] > ratingB[2]) { return selectorA; } else if (ratingB[2] > ratingA[2]) { return selectorB; } // 如果所有特异性等级都相同，则后定义的规则优先（这里简单返回A，实际排序会处理） // 在本例的sort函数中，如果compareSpecificity返回A，则A排在B前面，否则B排在A前面 // 当特异性相同时，CSS规则的声明顺序决定了优先级，后声明的优先。 // 但是我们的sort函数是根据compareSpecificity的结果来决定-1或1， // 如果特异性完全相同，这里返回哪个选择器并不影响排序结果（因为会返回0）， // 此时foundRules数组的原始顺序（即样式表中的声明顺序）会保持。 return selectorA; // 或者 selectorB，不影响最终结果，因为特异性相同}
注意事项：
compareSpecificity 函数的实现是一个简化的版本，用于说明特异性比较的原理。真实的CSS特异性计算规则更为复杂，例如会考虑伪元素、属性选择器、!important等。对于大多数常见场景，此简化版本可能足够。document.styleSheets 只能访问同源（Same-Origin）的样式表。对于跨域加载的样式表，出于安全考虑，其cssRules属性可能无法访问。动态插入的样式（如通过JavaScript创建标签或直接设置element.style）不会出现在document.styleSheets中，此方法无法获取。对于大型页面和复杂的样式表，遍历所有规则可能会有性能开销。在性能敏感的场景下，应谨慎使用或考虑优化。
示例用法
假设我们有以下HTML和CSS：
Test Content
div { width: 100%; border: 1px solid #777;}div.test { width: calc(100vw - 100px);}.test { background: #aaa; width: 300px; /* 这个规则的特异性低于 div.test */}
现在，我们想获取.test元素的width属性的原始calc()值：
const testElement = document.querySelector('.test');const originalWidthFormula = findRule(testElement, 'width');console.log('原始 width 公式:', originalWidthFormula);// 预期输出: 原始 width 公式: calc(100vw - 100px)// 对比 getComputedStyle 的结果const computedWidth = window.getComputedStyle(testElement).getPropertyValue('width');console.log('计算后的 width 值:', computedWidth);// 预期输出: 计算后的 width 值: 某个像素值，例如 "980px"
通过上述示例，我们可以清晰地看到findRule函数成功地获取了原始的calc()表达式，而getComputedStyle则返回了计算后的像素值。
总结
当window.getComputedStyle()无法满足获取CSS属性原始定义值的需求时，通过遍历文档样式表并结合CSS特异性进行规则匹配和排序是一种有效的解决方案。这种方法使我们能够获取到calc()、var()等CSS函数表达式的原始形式，为更高级的CSS操作和分析提供了可能性。然而，开发者在使用此方法时也需注意其性能开销和跨域样式表的限制。
以上就是JavaScript中获取CSS原始值而非计算值的技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532586.html
微信扫一扫 
支付宝扫一扫 
