如何使用 javaScript 获取元素（不是 px）的 % 高度？ [复制]答案

【问题标题】：How can I get the % height of an element (not the px) with javaScript? [duplicate]如何使用 javaScript 获取元素（不是 px）的 % 高度？ [复制]
【发布时间】：2019-09-22 07:52:54
【问题描述】：

当我点击一个按钮时，我想将 div 高度增加 25%，所以我希望能够以 % 的形式获得最后一个 div 高度值，然后简单地添加 25。

是否有一个 javaScript 方法会返回 '80%'，这是 CSS 中定义的高度，而不是返回 80% 的元素的计算 px 值？

<div class="container">
</div>

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.container {
  height: 80%;
  background: #eee;
}

let container = document.querySelector('.container');

console.log(container.style.height); //Empty
console.log(container.clientHeight); //Calculated px value at 80%
//I am looking for a method/way to return '80%'

【问题讨论】：

您必须使用the CSSOM 来检查样式表中的值。我建议使用数学来手动计算百分比。
有一个 jQuery 方法来获取高度的百分比，api.jquery.com/height,

标签： javascript html css

【解决方案1】：

var PctHeight = Math.round(container.clientHeight / body.clientHeight * 100.0);

假设大多数人不打算设置小数百分比值，将元素的高度除以包含元素的高度应该得到你想要的值。

【讨论】：

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案2】：

你不能只取元素的高度，然后除以它的父元素的高度乘以 100 吗？

【讨论】：

谢谢，这实际上比尝试直接读取值要容易得多，而且这似乎非常适合我的情况。
不过，这并没有像提出的那样回答问题。它可能会解决您的整体问题，但它不会“返回...... CSS 中定义的高度 [d]”。如果您要在中途更改问题，请务必进行相应更新，以便问题和接受的答案匹配。