本文探讨了如何通过javascript获取css属性的原始声明值，而非其计算后的像素值。针对`window.getcomputedstyle()`无法返回`calc()`等表达式的问题，文章提供了一种解决方案：遍历文档样式表，匹配元素选择器，并根据css特异性排序，最终提取出最具体规则的原始css值。
在前端开发中，我们经常需要获取元素的CSS属性值。通常，window.getComputedStyle(element).getPropertyValue(property)是获取元素最终计算样式的标准方法。然而，当CSS属性值是像calc(100vh - 305px)这样的表达式时，getComputedStyle会返回其计算后的像素值（例如，"542.984375px"），而不是原始的表达式字符串。这在某些场景下，例如需要动态修改或分析原始CSS表达式时，会带来不便。
为了解决这一问题，我们需要一种机制来查找并提取应用于元素的原始CSS规则声明。其核心思路是：
- 遍历页面中所有的样式表。
- 在每个样式表中，检查其包含的CSS规则。
- 对于每个CSS规则，判断其选择器是否与目标元素匹配。
- 如果匹配，则记录该规则的选择器及其声明的属性值。
- 由于一个元素可能被多个CSS规则匹配，我们需要根据CSS特异性（Specificity）对这些匹配的规则进行排序，以确定哪个规则是最终生效的。
- 返回特异性最高的规则所声明的属性值。
核心实现：查找并排序CSS规则
我们将通过JavaScript实现一个findRule函数来完成上述逻辑。这个函数将接收一个DOM元素和要查找的CSS属性名作为参数。
/**
* 查找应用于指定元素并声明了特定CSS属性的原始CSS规则值。
* @param {Element} elem - 目标DOM元素。
* @param {string} name - 要查找的CSS属性名。
* @returns {string|undefined} 原始CSS属性值，如果未找到则返回undefined。
*/
function findRule(elem, name) {
const found = []; // 存储所有匹配的 [选择器, 属性值] 对
// 遍历文档中的所有样式表
for (const { cssRules } of document.styleSheets) {
// 遍历样式表中的所有CSS规则
for (const { style, selectorText } of cssRules) {
// 确保规则有样式声明且选择器文本存在
if (style && selectorText) {
const value = style[name]; // 获取属性的原始值
// 如果属性有值，并且元素匹配该选择器
if (value && elem.matches(selectorText)) {
found.push([selectorText, value]);
}
}
}
}
// 如果没有找到任何匹配的规则，则返回undefined
if (found.length === 0) {
return undefined;
}
// 根据CSS特异性对找到的规则进行排序
// 排序后，特异性最高的规则将位于数组的第一个位置
found.sort(([selectorA], [selectorB]) => {
const winningSelector = compareSpecificity(selectorA, selectorB);
return winningSelector === selectorA ? -1 : 1; // -1表示selectorA优先，1表示selectorB优先
});
// 返回特异性最高的规则的属性值
return found[0][1];
}CSS特异性比较函数
findRule函数依赖于一个compareSpecificity函数来比较两个CSS选择器的特异性。CSS特异性是一个复杂的概念，它决定了当多个规则应用于同一元素时，哪个规则会生效。特异性通常由ID选择器、类/属性/伪类选择器和元素/伪元素选择器的数量来计算。
立即学习“Java免费学习笔记（深入）”；
以下是一个简化的特异性比较函数实现，它能够处理ID、类和元素选择器：
/**
* 比较两个CSS选择器的特异性，返回特异性更高的选择器。
* 这是一个简化的实现，主要考虑ID、类和元素选择器。
* @param {string} selectorA - 第一个CSS选择器字符串。
* @param {string} selectorB - 第二个CSS选择器字符串。
* @returns {string} 特异性更高的选择器字符串。
*/
function compareSpecificity(selectorA, selectorB) {
// 辅助函数：计算单个选择器的特异性评分 [ID, Class/Attribute/Pseudo-class, Element/Pseudo-element]
const getSpecificityRating = (selector) => {
let rating = [0, 0, 0];
// 将选择器按空格分割，并处理可能存在的复合选择器
// 注意：这里简单地按空格分割，实际更复杂的选择器解析可能需要更健壮的逻辑
const parts = selector.split(/[\s>+~]/).filter(p => p.trim() !== '');
parts.forEach(part => {
// 计数ID选择器
rating[0] += (part.split('#').length - 1);
// 计数类选择器
rating[1] += (part.split('.').length - 1);
// 计数属性选择器 (例如 [type="text"])
rating[1] += (part.split('[').length - 1);
// 计数伪类选择器 (例如 :hover, :nth-child)
rating[1] += (part.split(':').length - 1); // 简单计数，未区分伪类和伪元素
// 计数元素选择器和伪元素选择器
// 排除ID、类、属性、伪类和通配符选择器
if (!part.startsWith('#') && !part.startsWith('.') && !part.startsWith('[') && !part.startsWith(':') && part !== '*') {
// 尝试去除伪元素（如::before, ::after）的影响，但这里仅简单计数
const cleanPart = part.replace(/::[a-zA-Z-]+/g, '');
if (cleanPart) { // 确保不是空字符串
rating[2] += 1;
}
}
});
return rating;
};
const ratingA = getSpecificityRating(selectorA);
const ratingB = getSpecificityRating(selectorB);
// 逐级比较特异性：ID > 类 > 元素
for (let i = 0; i < 3; i++) {
if (ratingA[i] > ratingB[i]) {
return selectorA;
}
if (ratingB[i] > ratingA[i]) {
return selectorB;
}
}
// 如果所有级别都相同，则通常认为后定义的规则优先，
// 但在排序时，如果特异性相同，维持原有顺序或按出现顺序决定
// 这里为了确保一致性，可以返回任意一个，或者根据在样式表中的顺序决定
// 在 `sort` 函数中，我们通过 `return winningSelector === selectorA ? -1 : 1;` 来处理。
// 如果特异性完全相同，通常CSS会遵循“后来者居上”的原则。
// 为了让排序稳定，如果特异性完全相同，这里返回第一个选择器，让sort根据其原有顺序决定。
return selectorA;
}注意事项：
- 上述compareSpecificity函数是一个简化版本，它可能无法完全覆盖所有CSS选择器特异性的复杂情况，例如：!important声明、行内样式、复杂的组合选择器、属性选择器（如[type="text"]）、伪类（如:not(), :has()) 和伪元素（如::before）。
- document.styleSheets只能访问同源（same-origin）的样式表。如果CSS文件来自不同的域，出于安全原因，其内容将无法通过JavaScript访问。
- 对于大型项目或频繁调用，遍历所有样式表和规则可能会有性能开销。在生产环境中，应考虑缓存机制或优化调用频率。
- 动态添加的行内样式（如element.style.width = '...'）不会出现在document.styleSheets中，因此此方法无法获取。
示例用法
假设我们有以下HTML和CSS：
HTML:
这是一个测试元素
CSS:
div {
width: 100%;
border: 1px solid #777;
}
div.test {
width: calc(100vw - 100px);
}
.test {
background: #aaa;
width: 300px; /* 这个会被 div.test 覆盖 */
}现在，我们想获取.test元素的width属性的原始声明值：
// 假设上面的 findRule 和 compareSpecificity 函数已经定义
document.addEventListener('DOMContentLoaded', () => {
const testElement = document.querySelector('.test');
if (testElement) {
const originalWidth = findRule(testElement, 'width');
console.log("原始 width 属性值:", originalWidth); // 预期输出: calc(100vw - 100px)
// 对比 getComputedStyle 的结果
const computedWidth = window.getComputedStyle(testElement).getPropertyValue('width');
console.log("计算后的 width 属性值:", computedWidth); // 预期输出: 类似 "542.984375px"
}
});总结
通过遍历document.styleSheets并结合CSS特异性排序，我们能够有效地获取到元素CSS属性的原始声明值，这对于需要处理calc()等表达式的场景尤为有用。尽管此方法比简单的getComputedStyle更复杂，且存在一些局限性（如跨域样式表和行内样式），但它为我们提供了一个强大的工具来深入理解和操作页面的样式声明。在实际应用中，开发者应根据具体需求权衡其优缺点，并考虑性能优化和更完善的特异性算法。
