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

【问题标题】：Getting result of CSS calc to set custom properties获取 CSS calc 的结果以设置自定义属性
【发布时间】：2017-03-28 23:19:51
【问题描述】：

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

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

【问题讨论】：

相关：stackoverflow.com/questions/28715872/… 虽然这与自定义属性的计算方式无关，但它提供了一些关于 calc() 在该领域的不足之处的见解。

标签： css css-calc css-variables

【解决方案1】：

.percent 类中有拼写错误：

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

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

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

【讨论】：

@torazaburo 感谢您的回复，但您同意我的回答吗？
是的，它适用于百分比，但我必须为旨在产生各种长度、纯整数等的类组合开发类似的解决方法。

【解决方案2】：

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

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

【讨论】：