JavaScript获取CSS原始声明值（如calc()）的策略与实现

/**
 * 查找应用于指定元素并声明了特定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选择器的特异性，返回特异性更高的选择器。
 * 这是一个简化的实现，主要考虑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;
}

<div class='test'>这是一个测试元素</div>

div {
  width: 100%;
  border: 1px solid #777;
}
div.test {
  width: calc(100vw - 100px);
}
.test {
  background: #aaa;
  width: 300px; /* 这个会被 div.test 覆盖 */
}

// 假设上面的 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"
    }
});