Question

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

所以，让我说我有两个使用jQuery的元素，而我想做的就是围绕这些简单的界限：

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

Element2嵌套在Element1中，其中overflow:scroll.

问题是，我的element1有所有属性 clientHeight，scrollHeight等等于0 ，当我进入element1.style.height时，结果为：＆＃ 34;计算（100％ - 64px）＆＃34;。 请注意，这个结果永远不会等于0px，因为我检查时的element1高度大约是500px（当然取决于屏幕大小）。我的element2高度是使用element2.scrollHeight在px中获得的（在我的情况下更可靠）。

所以最后我试图比较两个想要这样的表达式：calc（100％ - 64px）＆gt; 452 ..当然，这不起作用。

有没有什么方法可以在我的js文件中执行calc（）函数来获得px中的等效高度以便比较我的两个元素？或者我可以在其他任何地方访问数据吗？

我的最终目标是了解element2的高度是否大于element1＆＃39; s。所以任何其他实现高度计算也是受欢迎的。

Answer 1

您可以使用Window.getComputedStyle()获取计算出的样式。查看compatibility table。

然后，抓住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>

在JS中评估CSS calc函数

1 个答案: