当需要获取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创建
- 对于大型页面和复杂的样式表，遍历所有规则可能会有性能开销。在性能敏感的场景下，应谨慎使用或考虑优化。
示例用法
假设我们有以下HTML和CSS：
<div class='test'>Test Content</div>
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操作和分析提供了可能性。然而，开发者在使用此方法时也需注意其性能开销和跨域样式表的限制。
