通过 Javascript 访问 CSS 计算变量

Question

在 CSS 中使用 calc() 化的属性时，是否可以通过 Javacsript 访问它们的扩展（即实际计算的）值？

例如，考虑以下 CSS：

:root {
    --ratio: calc(16 / 9);
    --width: 100px;
    --height: calc(var(--width) / var(--ratio));
}

和Javascript：

const computedStyle = window.getComputedStyle(document.documentElement);
console.info(computedStyle.getPropertyValue('--height'));

人们希望看到 56px 被打印；相反，返回字符串 "calc(var(--width) / var(--ratio))"。

即使您尝试将它应用于某些 CSS class 属性并改为从 class 声明中读取，它也不会起作用：

.rectangle {
    height: var(--height);
}

Javascript:

const rectangleClassDeclaration = /* find it through document.styleSheets */
console.info(rectangleClassDeclaration.style.getPropertyValue('height'));

并且控制台显示 "var(--height)"。

那么，有没有办法通过 Javascript 访问最终的计算值？

Answer 1

我能想到的一个 hack 是将值应用于某些 DOM 元素，然后他们从中读取。

CSS:

.rectangle {
    height: var(--height);
}

HTML:

<div class="rectangle"></div>

Javascript:

const rectangle = document.querySelector('.rectangle');
const computedStyle = window.getComputedStyle(rectangle);
console.info(computedStyle.getPropertyValue('height'));

然后您会看到 56px 作为结果。但这有点老套，所以最好找到一些直接访问变量计算值的方法。无论如何，它有效。

请参阅 my CodePen 和工作代码。

通过 Javascript 访问 CSS 计算变量

Accessing CSS calculated variable through Javascript

javascript

css

css-variables