1

在 CSS 中使用calc()ulated 属性时，是否可以通过 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 类属性并改为从类声明中读取，它也不起作用：

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

Javascript：

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

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

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

4

1 回答 1

0

我能想到的一种技巧是将值应用于某些 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结果。但这有点 hacky，所以最好找到一些直接访问变量计算值的方法。无论如何，它有效。

使用工作代码查看我的 CodePen 。

于 2017-07-23T17:22:24.383 回答