Question

作为CSS的新手，我喜欢使用CSS自定义变量以及calc，以使我的代码易于他人理解，重用和修改，并使页面保持一致（我不希望我使用的颜色网页的两个不同部分上的主要颜色都不同）。

但是，当我想通过Javascript读取一个自定义变量（定义为另外2个变量的总和）时，它给了我纯文本"calc(<value of the first variable> + <value of the second one>)"。

更令人惊讶的是，当我将上述总和分配给标准CSS属性，然后读取它时，它返回了我期望的结果（总和）。

这是我的代码的简化：

let inputExample1 = document.getElementById("myFirstInput");
let inputExample2 = document.getElementById("mySecondInput");
            
inputExample1.value = getComputedStyle(inputExample1).getPropertyValue("--a-local-custom-variable");
inputExample2.value = getComputedStyle(inputExample2).getPropertyValue("top");

:root{
    --a-custom-variable: 10px;
    --another-custom-variable: 20px;
    --a-result-of-the-previous-variables: var(--a-custom-variable) + var(--another-custom-variable);
}

input {
    --a-local-custom-variable: calc(var(--a-result-of-the-previous-variables));
    top: calc(var(--a-result-of-the-previous-variables));
}

<html>
    <head>
        <link href="Custom_CSS_variable_test.css" rel="stylesheet">
    </head>
    <body>
        <input id="myFirstInput" type="text">
        <input id="mySecondInput" type="text">
    </body>
</html>

Answer 1

参考specification：

自定义属性几乎完全未评估，除了他们允许并评估var（）函数的值。

因此，您得到的结果是合乎逻辑的，但lib/hello/index.js属性的行为将有所不同，并将保留最终结果。因此，自定义属性在与某个属性一起使用之前将保持未评估状态。

访问由其他自定义变量组成的自定义CSS变量不会计算值

1 个答案: