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是否为--percent的自定义属性50%生成了值。不幸的是，如果我使用getComputedStyle来检查--percent的值，我会看到整个（未解析的，未计算的）“calc”字符串。如果我检查width的值，我会得到已经解析的值，例如“512px”。

有没有办法以编程方式获取和验证自定义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中获取元素及其父元素的宽度来进行简单的测试，例如：

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;
}

<div id="parent">
    <div id="test" class="fifty percent wide">
    </div>
</div>

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

Answer 2

执行此操作的一种方法是通过从元素及其父级（以像素为单位）获取宽度来自行计算百分比。然后，只需将parentWidth除以elementWidth即可计算百分比。

另外，也许你可以手动测试CSS。如果一切按预期工作，您将不再需要测试用例。它不像这样打破了一晚，对吗？

获取CSS calc的结果以设置自定义属性

2 个答案: