获取 CSS 原始值：绕过 getComputedStyle 的计算结果

function findRule(elem, propertyName) {
    const foundRules = []; // 存储匹配到的规则及其选择器
    // 遍历文档中所有的样式表
    for (const { cssRules } of document.styleSheets) {
        // 遍历当前样式表中的所有CSS规则
        for (const rule of cssRules) {
            // 确保是 CSSStyleRule 类型，因为它包含 selectorText 和 style
            if (rule instanceof CSSStyleRule) {
                const { style, selectorText } = rule;
                const value = style?.[propertyName]; // 获取原始属性值

                // 如果属性存在且元素匹配该选择器，则将其加入到 foundRules
                if (value && elem.matches(selectorText)) {
                    foundRules.push([selectorText, value]);
                }
            }
        }
    }

    // 根据CSS特异性对找到的规则进行排序
    // 排序后，特异性最高的规则将位于数组的第一个位置
    foundRules.sort(([selectorA], [selectorB]) => {
        // 使用 compare 函数判断哪个选择器更具特异性
        const moreSpecificSelector = compare(selectorA, selectorB);
        // 如果 selectorA 更具特异性，则返回 -1 (A排在B前面)
        return moreSpecificSelector === selectorA ? -1 : 1;
    });

    // 返回特异性最高的规则的属性值
    return foundRules.length > 0 ? foundRules[0][1] : undefined;
}

// 辅助函数：计算单个选择器的特异性分数 (A, B, C)
function calculateSpecificity(selector) {
    let aRating = 0; // ID 选择器
    let bRating = 0; // 类、属性、伪类选择器
    let cRating = 0; // 元素、伪元素选择器

    // 将选择器拆分为更小的部分进行分析
    // 注意：这个简单的split可能无法处理所有复杂的CSS选择器，例如组合选择器中的空格
    const selectorParts = selector.split(/[\s>+~]/).filter(part => part.trim() !== '');

    selectorParts.forEach(part => {
        // 统计 ID 选择器 (#)
        aRating += (part.split("#").length - 1);

        // 统计 类选择器 (.)
        bRating += (part.split(".").length - 1);

        // 统计 属性选择器 ([])
        bRating += (part.split("[").length - 1);

        // 统计 伪类选择器 (:) - 简单的计数，不区分伪类和伪元素
        bRating += (part.split(":").length - 1); // 这是一个简化，严格来说伪元素属于C

        // 统计 元素选择器 (非 # . [ : 开头的)
        if (!part.startsWith("#") && !part.startsWith(".") && !part.startsWith("[") && !part.startsWith(":")) {
            cRating += 1;
        }
    });
    return [aRating, bRating, cRating];
}

// 比较两个选择器的特异性，返回特异性更高的选择器字符串
function compare(selectorA, selectorB) {
    const [a1, b1, c1] = calculateSpecificity(selectorA);
    const [a2, b2, c2] = calculateSpecificity(selectorB);

    // 逐级比较特异性
    if (a1 > a2) return selectorA;
    if (a2 > a1) return selectorB;

    if (b1 > b2) return selectorA;
    if (b2 > b1) return selectorB;

    if (c1 > c2) return selectorA;
    if (c2 > c1) return selectorB;

    // 如果特异性完全相同，则按CSS规则，后声明的优先
    // 但在这个函数中，我们只是比较特异性，不考虑声明顺序
    // 在 sort 函数中，如果特异性相同，原始顺序会被保留或根据浏览器实现
    return selectorA; // 默认返回第一个，表示特异性相同
}

div {
  width: 100%;
  border: 1px solid #777;
}
div.test {
  width: calc(100vw - 100px); /* 更具体的规则 */
}
.test {
  background: #aaa;
  width: 300px; /* 较不具体的规则 */
}

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

// 获取 class 为 'test' 的元素
const testElement = document.querySelector('.test');

// 调用 findRule 函数获取 'width' 属性的原始值
const originalWidth = findRule(testElement, 'width');

console.log(originalWidth); // 预期输出: "calc(100vw - 100px)"