Javascript 通过id获取元素的当前高度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3974521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get current height of element by id
提问by Sphvn
I have an element as follows
我有一个元素如下
<div id="loadNavigation" style="width:20%"></div>
<div id="loadContent" style="width:80%"></div>
Essentially navigation is on the left, content on the right.
基本上导航在左边,内容在右边。
Now I am dynamically resizing both loadContent
and loadNavigation
on page load to be at a minimum height of the browsers window height. Though at points more likely then not one of the div's will exceed the other in length if it exceeds window height. To prevent this from happening as an example I want to increase loadNavigation
to the same size as loadContent
by getting the height value of loadContent
.
现在我正在动态调整页面加载loadContent
和loadNavigation
页面加载的大小,使其处于浏览器窗口高度的最小高度。虽然在更可能的情况下,如果超过窗口高度,那么没有一个 div 的长度会超过另一个。为了防止这种情况发生,因为我想增加一个例子loadNavigation
,以相同的大小loadContent
通过获取的高度值loadContent
。
So far I have tried:
到目前为止,我已经尝试过:
function resizeAppWindow() {
var windowHeight = getWindowHeight();
var contentElement = document.getElementById("content");
var contentHeight = (windowHeight - 25);
contentElement.style.minHeight = contentHeight + "px";
var currentContentHeight = contentElement.style.height;
var navigationElement = document.getElementById("navigation");
var differenceInHeight = currentContentHeight - windowHeight;
var navigationHeight = (windowHeight + differenceInHeight);
navigationElement.style.minHeight = navigationHeight + "px";
}
But currentContentHeight
will return null. I beleive this is because the element has a style="min-height:00px;"
but not an actual defined height?
但是currentContentHeight
会返回null。我相信这是因为元素具有style="min-height:00px;"
但没有实际定义的高度?
Any pointers in the right direction would be appreciated.
任何指向正确方向的指针将不胜感激。
回答by WSkid
Try offsetHeight:
尝试偏移高度:
var currentContentHeight = contentElement.offsetHeight;
Take a look at this page for more height/width properties and how they handle across browsers - quirksmode.org
查看此页面以了解更多高度/宽度属性以及它们如何跨浏览器处理 - quirksmode.org