评估JS中的CSS CALC函数

Question

我试图找出一种直接在JS文件中执行CSS CALC函数的方法，以比较两个元素高度。

所以，假设我有两个要使用jQuery的元素，而我要做的就是围绕这些简单的行：

if (element1.height > element2.height) then ...

element2嵌套在元素1中，该元素具有overflow:scroll.

问题是，我的元素1具有所有属性 clientHeight，scrollheight等等于0 ，并且当我进入element1.Style.height时，结果是：(100％-64px("。请注意，它的结果永远不等于0px，因为我的元素1当我检查它的高度约为500px(当然取决于屏幕尺寸(。我的元素2高度是在PX中使用element2.Crollheight在PX中获得的(在我的情况下更可靠(。

所以最后我试图比较两个想要的表达式：calc(100％-64px(> 452 ..当然这不起作用。

有什么方法可以在JS文件中执行Calc((函数以获取PX中的等效高度以比较我的两个元素？还是我可以在其他任何地方访问数据？

我的最终目标是知道元素2的高度是否大于元素1。因此，任何其他实施也欢迎了高度计算。

Answer 1

您可以使用window.getCompetedStyle((获得计算样式。查看兼容性表。

然后，抓住width并从结果中删除" PX"，然后将其解析为整数：

let myElement = document.getElementById('child');
let width = parseInt(window.getComputedStyle(myElement).width.slice(0, -2), 10);
console.log(width);

#parent {
  background: red;
  height: 100px;
  width: 80%;
}
#child {
  background: green;
  height: 60px;
  width: calc(100% - 64px);
}

<div id="parent">
  <div id="child"></div>
</div>