获取 CSS 计算结果以设置自定义属性

Question

我正在测试一个 CSS 框架，用于通过微类指定数字。例如，类似的内容<div class="fifty percent wide">可能会翻译成width: 50%. 该实现使用 CSS 变量（自定义属性）。

考虑以下 CSS：

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    { width: var(--percent); }

一切都很好，而且效果很好。问题是我想编写一个测试套件，它将验证 的自定义属性的fifty percent值。不幸的是，如果我用来检查 的值，我会看到整个（未解析、未计算的）“calc”字符串。如果我检查 的值，我会得到已经解析的值，例如“512px”。--percent50%getComputedStyle--percentwidth

是否有某种方法可以以编程方式获取和验证自定义 CSS 属性的已解析、计算值？或者强制计算“calc”表达式的 API？

Answer 1

您在课堂上遇到拼写错误.percent：

.percent { --percent: calc(1% * var(--number); }
//                                          ^    you have to close Brackets of Calc()
.percent { --percent: calc(1% * var(--number)); }

我建议通过获取元素及其父元素的宽度（以 px 为单位）来进行简单的测试，如下所示：

.percent { --percent: calc(1% * var(--number); }
//                                          ^    you have to close Brackets of Calc()
.percent { --percent: calc(1% * var(--number)); }

var elem = document.getElementById("test");
var parent = document.getElementById("parent");
var elem_width = window.getComputedStyle(elem, null).getPropertyValue("width");

alert("50% of 200px parent width = " + elem_width);

#parent{
  background-color:black;
  width:200px;
  height: 200px;
}

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    {
   width: var(--percent);
   height: 100px;
   background-color:red;
}

_{注意：从代码到 DOM，它无法理解属性或 CSS 样式。这是设计使然。JavaScript 只能访问 DOM，不能访问代码。所以不，没有办法从 javascript 访问浏览器本身不支持的属性。}

Answer 2

一种方法是通过获取元素及其父元素的宽度（以像素为单位）来自行计算百分比。然后简单地除以parentWidth计算elementWidth百分比。

另外，也许你可以手动测试 CSS。如果一切按预期工作，您将不需要更多的测试用例。不会是一夜之间就断了吧？