在JavaScript中获取CSS原始声明值（如calc()）而非计算结果-js教程-PHP中文网

在JavaScript中获取CSS原始声明值（如calc()）而非计算结果

当需要获取css属性的原始声明值（例如 `calc()` 或 `var()` 函数）而非其最终计算结果时，`window.getcomputedstyle()` 方法不再适用。本文将深入探讨一种通过遍历样式表、匹配选择器并根据css特异性规则识别最相关声明的javascript方法，从而精确获取元素css属性的原始定义，尤其适用于处理动态计算值和css变量的场景。

引言：为何getComputedStyle不足以满足需求？

在Web开发中，我们经常需要通过JavaScript访问和操作元素的CSS属性。window.getComputedStyle() 方法是获取元素最终计算样式（即浏览器解析并应用所有CSS规则后得到的样式）的标准途径。例如，如果一个元素的 height 属性被定义为 calc(100vh - 305px)，getComputedStyle(element).getPropertyValue('height') 将返回一个具体的像素值，如 "542.984375px"，而不是原始的 calc() 表达式。

这种行为在大多数情况下是有益的，因为它提供了元素在页面上实际渲染的最终尺寸。然而，在某些特定场景下，我们可能需要获取CSS属性的原始声明值，例如：

调试和分析： 了解CSS属性是如何被定义的，而不是它最终计算出的结果。
动态主题或配置： 如果CSS属性使用了 var() 函数，我们可能需要获取变量名，而不是变量的最终值。
自定义CSS处理器： 在构建某些工具或库时，可能需要解析原始的 calc() 或其他函数表达式。

由于浏览器在提供计算样式时已经完成了所有表达式的解析，因此无法通过 getComputedStyle 获取原始声明。这要求我们采取一种不同的策略：直接检查文档中的样式表。

解决方案：遍历样式表与特异性排序

要获取CSS属性的原始声明值，我们需要模拟浏览器解析CSS规则的过程。这包括以下核心步骤：

立即学习“Java免费学习笔记（深入）”；

访问所有样式表： 获取文档中所有 <style> 标签和 <link rel="stylesheet"> 引入的样式表。
遍历CSS规则： 检查每个样式表中的所有CSS规则。
匹配元素选择器： 对于每个规则，判断其选择器是否与目标元素匹配。
提取属性值： 如果选择器匹配，则提取该规则中对应CSS属性的原始值。
应用CSS特异性： 由于一个元素可能被多个CSS规则匹配，我们需要根据CSS特异性（Specificity）规则来确定哪个规则的声明是最终生效的。

JavaScript实现：findRule 函数

以下是一个实现上述逻辑的JavaScript函数 findRule。它接收一个DOM元素和要查找的CSS属性名，并返回该属性的原始声明值。

/**
 * 查找元素特定CSS属性的原始声明值。
 * @param {HTMLElement} elem - 目标DOM元素。
 * @param {string} name - 要查找的CSS属性名。
 * @returns {string|undefined} 属性的原始声明值，如果未找到则返回 undefined。
 */
function findRule(elem, name) {
    const found = [];
    // 遍历文档中的所有样式表
    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)) {
                    found.push([rule.selectorText, value]);
                }
            }
        }
    }

    // 根据CSS特异性对找到的规则进行排序
    // compare 函数将决定哪个选择器更具体
    found.sort(([selectorA], [selectorB]) => {
        const moreSpecificSelector = compare(selectorA, selectorB);
        // 如果 selectorA 更具体，则它应该排在前面 (-1)
        // 否则 selectorB 更具体，或者两者相同，selectorB 应该排在前面 (1)
        return moreSpecificSelector === selectorA ? -1 : 1;
    });

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

登录后复制

CSS特异性比较：compare 函数

findRule 函数的核心在于 compare 函数，它负责根据CSS特异性规则比较两个选择器，并返回特异性更高的选择器。CSS特异性通常通过计算选择器中ID选择器、类选择器（包括属性选择器和伪类）和类型选择器（标签名和伪元素）的数量来确定。

人声去除

用强大的AI算法将声音从音乐中分离出来

查看详情

以下是 compare 函数的实现，它是一个简化的特异性计算器，主要关注ID、类和标签选择器：

/**
 * 比较两个CSS选择器的特异性，返回特异性更高的选择器。
 * 注意：这是一个简化的特异性计算器，不涵盖所有CSS特异性规则。
 * @param {string} selectorA - 第一个CSS选择器字符串。
 * @param {string} selectorB - 第二个CSS选择器字符串。
 * @returns {string} 特异性更高的选择器字符串。
 */
function compare(selectorA, selectorB) {
    // 辅助函数：计算选择器的特异性评分 [ID, Class, Tag]
    const calculateSpecificity = (selector) => {
        let rating = [0, 0, 0]; // [ID, Class/Pseudo-class/Attribute, Tag/Pseudo-element]
        // 简化处理：将选择器按空格分割，然后检查每个部分
        // 注意：这可能不完全准确，因为选择器可以更复杂
        const items = selector.split(/[\s>+~]/); // 简单地按组合器分割

        items.forEach((item) => {
            if (item.includes('#')) {
                rating[0] += (item.split('#').length - 1); // 计算ID选择器数量
            }
            if (item.includes('.')) {
                rating[1] += (item.split('.').length - 1); // 计算类选择器数量
            }
            // 检查是否是标签选择器，同时排除ID和类选择器
            if (!item.startsWith('#') && !item.startsWith('.') && item.length > 0) {
                // 进一步排除伪类、属性选择器等
                if (!item.includes('[') && !item.includes(':')) {
                    rating[2] += 1; // 计算标签选择器数量
                }
            }
        });
        return rating;
    };

    const aRating = calculateSpecificity(selectorA);
    const bRating = calculateSpecificity(selectorB);

    // 逐级比较特异性：ID > Class > Tag
    if (aRating[0] > bRating[0]) {
        return selectorA;
    } else if (bRating[0] > aRating[0]) {
        return selectorB;
    }

    if (aRating[1] > bRating[1]) {
        return selectorA;
    } else if (bRating[1] > aRating[1]) {
        return selectorB;
    }

    if (aRating[2] > bRating[2]) {
        return selectorA;
    } else if (bRating[2] > aRating[2]) {
        return selectorB;
    }

    // 如果所有特异性级别都相同，则通常是后声明的规则生效。
    // 在本例中，我们简单地返回 selectorA，因为 sort 函数会处理相等情况下的相对顺序。
    // 实际的浏览器行为会考虑声明顺序，这里我们假设在相等情况下，排序算法的稳定性足够。
    return selectorA;
}

登录后复制

注意事项：

上述 compare 函数是一个简化的特异性计算器。它能够处理常见的ID、类和标签选择器。然而，CSS特异性规则非常复杂，包括属性选择器 [attr]、伪类 :hover、伪元素 ::before、!important 规则、内联样式以及不同组合器（如 +, ~, >）的影响。对于需要完全准确特异性计算的场景，可能需要一个更健壮的库或自定义实现。
在 calculateSpecificity 函数中，item.split(/[\s>+~]/) 是一种简化的选择器分割方式，可能无法正确处理所有复杂的选择器组合。

完整示例

为了演示上述代码的用法，我们创建一个简单的HTML结构和CSS样式。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取CSS原始值示例</title>
    <style>
        /* 示例CSS样式 */
        div {
            width: 100%;
            border: 1px solid #777;
        }
        div.test {
            width: calc(100vw - 100px); /* 原始声明值 */
        }
        .test {
            background: #aaa;
            width: 300px; /* 较低特异性的声明 */
        }
    </style>
</head>
<body>
    <div class='test'>这是一个测试元素</div>

    <script>
        // 将 findRule 和 compare 函数放在这里，或者引入外部JS文件
        // ... (上面提供的 findRule 和 compare 代码) ...

        // 示例用法
        document.addEventListener('DOMContentLoaded', () => {
            const testElement = document.querySelector('.test');

            // 使用 getComputedStyle 获取计算值
            const computedWidth = window.getComputedStyle(testElement).getPropertyValue('width');
            console.log("计算后的宽度 (getComputedStyle):", computedWidth); // 例如: "1234.56px"

            // 使用 findRule 获取原始声明值
            const originalWidth = findRule(testElement, 'width');
            console.log("原始声明的宽度 (findRule):", originalWidth); // 预期: "calc(100vw - 100px)"

            // 另一个属性，例如 background
            const originalBackground = findRule(testElement, 'background');
            console.log("原始声明的背景 (findRule):", originalBackground); // 预期: "#aaa"
        });
    </script>
</body>
</html>

登录后复制

在上述示例中，div.test 的 width 属性被声明为 calc(100vw - 100px)，而 .test 也声明了 width: 300px。由于 div.test 的选择器特异性高于 .test，findRule 函数将正确返回 calc(100vw - 100px)。

局限性与注意事项

尽管这种方法能够解决获取CSS原始声明值的需求，但它也存在一些局限性：

性能开销： 遍历 document.styleSheets 和其中的所有 cssRules 可能会导致显著的性能开销，尤其是在大型或样式复杂的页面上。应谨慎使用，避免在性能敏感的场景中频繁调用。
动态样式： 此方法主要适用于在 <style> 标签或外部CSS文件中定义的样式。它无法获取通过 element.style.setProperty() 或直接设置 element.style.propertyName 添加的内联样式，因为这些样式不属于 document.styleSheets。
!important 规则： 当前的 compare 函数没有考虑 !important 规则，而 !important 具有最高的优先级。如果需要处理这种情况，compare 函数需要进一步增强。
Shadow DOM： 如果元素位于 Shadow DOM 内部，其样式可能被封装，并且无法通过 document.styleSheets 直接访问。
跨浏览器兼容性： document.styleSheets 和 cssRules API 在现代浏览器中普遍支持，但对于一些老旧浏览器或特定的CSS规则类型，可能存在细微差异。
伪类/伪元素： elem.matches() 方法可以处理伪类（如 :hover），但对于伪元素（如 ::before）则无法直接匹配。此方法主要针对直接应用于元素的样式。

总结

通过直接遍历文档的样式表并结合CSS特异性规则，我们可以有效地获取到CSS属性的原始声明值，而非浏览器计算后的结果。这对于需要深入了解CSS定义、处理 calc() 或 var() 等动态表达式的场景非常有价值。然而，开发者在使用此方法时应充分考虑其性能影响和上述局限性，并根据具体需求调整特异性比较逻辑。在大多数情况下，getComputedStyle() 仍是获取元素最终样式的首选方法，但当需要原始定义时，本文提供的方法提供了一个可行的解决方案。

以上就是在JavaScript中获取CSS原始声明值（如calc()）而非计算结果的详细内容，更多请关注php中文网其它相关文章！