获取计算高度 - Javascript - 不是 jQuery答案

【问题标题】：Get Computed Height - Javascript - Not jQuery获取计算高度 - Javascript - 不是 jQuery
【发布时间】：2013-12-07 19:34:00
【问题描述】：

我有两个并排设置为高度自动的 div。我希望它们具有相同的高度，所以我将它们组合为数组的成员。

我递归遍历数组并将不最高的数组设置为最高的高度。问题是我试图获得 COMPUTED 高度的一切都导致了不正确的值。

我尝试了以下方法：

(els[x].currentStyle) ? h=els[x].currentStyle.height : h=window.getComputedStyle(els[x],null).height;

h =  el.clientHeight || el.offsetHeight || el.scrollHeight;

这两个都产生 640 像素，而在我的特定显示中计算为 751.8。

是否有一个常数可以用来获得正确的高度。就像我得到的数字可能是在标准尺寸的屏幕上（比如 960 像素高等）然后乘以窗口大小？

【问题讨论】：

outerHeight 怎么样？
getBoundingClientRect() 怎么样？
是否有填充和/或边框？
outerHeight 未定义。不存在填充或边框。我尝试使用 980 的屏幕高度，这实际上产生了一些接近的结果。我打赌浏览器正在使用某种常量然后调整屏幕大小。所以我得到的数字就是基于此。
我还没有尝试过这种方法，乔，我似乎需要一分钟才能弄清楚语法。

标签： javascript height

【解决方案1】：

如果你有 DOM 文档，你可以试试下面的代码：

let divElement = document.getElementById('divId');
let height = document.defaultView.getComputedStyle(divElement).height;

'height' 在计算后将具有带有 'divId' 的元素的确切高度。

【讨论】：

这给出的并不完全是高度数。只有“xx%”或“auto”。还有其他方法吗？

【解决方案2】：

我想出的这个小功能已经很好用了

function getH(id)
{
    return document.getElementById(id).offsetHeight;
}
// I have a styles.js file where this function feels right at home. Access this function from anywhere.

这将返回给定函数的任何给定元素的高度（通过它的 ID）。所以现在我们已经完成了 1/3。

然后使用 Math.max() 函数获取最大元素的高度。

var maxH = Math.max(getH("ID1"),getH("ID2"));

这是路的 2/3，耶 - 现在将元素高度设置为相同。

var x = document.getElementById("ID1");
var y = document.getElementById("ID2");

x.style.height = maxH +"px";
y.style.height = maxH +"px";  //Remember the +"px" has to be added as a string, thats the reason for the "".

完成！！ - 现在把它们放在一起

我会想象这样的事情

function setElementHeight()
{
    var maxH = Math.max(getH("ID1"),getH("ID2"));
    var x = document.getElementById("ID1");
    var y = doc...("ID2");
    x.style.height = maxH +"px";
    y.style.height = maxH +"px";
}
// Don't forget to include the first function in you'r .js file

这会将两个 ID 设置为相同的高度，并且高度将等于最高值。这就是你想要的，不是吗？

--编辑--

如果我是你，我会扔掉这个数组。只需让 2 个 DIV 各有一个唯一 ID，并以此为基础使它们同样高。

莫勒

【讨论】：