JavaScript中获取CSS原始值而非计算值的技巧

/**
 * 查找元素某个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选择器的特异性。
 * 返回特异性更高的选择器字符串。
 * @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，不影响最终结果，因为特异性相同
}

<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 */
}

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"