4

我正在测试一个通过微类指定数字的 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 属性的已解析计算值？还是一个 API 来强制评估“calc”表达式？

4

2 回答 2

3

你在课堂上有一个拼写错误.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访问属性。

于 2016-11-15T10:35:49.307 回答
0

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

此外，也许您可​​以手动测试 CSS。如果一切都按预期工作，您将不再需要任何测试用例。这不是一夜之间休息的，对吧？

于 2016-11-15T08:42:48.587 回答