如何获得一个元素的渲染高度?
比方说,你有一个<div>
元素,里面有一些内容。里面的内容将拉伸<div>
的高度。当你没有明确设置高度时,你如何获得"rendered" 高度。很明显,我试过了。
var h = document.getElementById('someDiv').style.height;
有什么技巧可以做到这一点吗?如果有帮助的话,我正在使用jQuery。
试试其中的一个。
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight
包括高度和垂直填充。
offsetHeight
包括高度、垂直填充和垂直边框。
scrollHeight
包括所包含的文档的高度(在滚动的情况下会大于单纯的高度),垂直填充和垂直边框。
NON JQUERY 因为在这些答案的顶部有一堆使用elem.style.height
的链接...。
INNER HEIGHT: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;
外高。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight;
或者是我最喜欢的参考资料之一。 http://youmightnotneedjquery.com/
你可以使用.externalHeight()
来实现这个目的。
它将为你提供元素的完整渲染高度。
另外,你不需要设置元素的任何css-height
。
为了谨慎起见,你可以保持它的高度为auto,这样它就可以按照内容的高度来渲染。
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);
要想清楚了解这些功能,你可以去jQuery'的网站或[详细的帖子在这里][1]。
它将清除.height()
/innerHeight()
/outerHeight()
之间的*差异。
[1]: https://17path.wordpress.com/2013/01/30/how-to-get-height-of-an-element-in-jquery/
一定要用
$('#someDiv').height() // to read it
或
$('#someDiv').height(newHeight) // to set it
我'作为补充回答发这个帖子,因为有几件重要的事情我刚刚学会。
我刚才差点掉进使用offsetHeight的陷阱。 事情是这样的。
这里'只是其中的一部分 。
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)
是的,它同时检查滚动和偏移。 如果失败了,它会考虑到浏览器和css的兼容性问题,看得更远。 换句话说,我不关心或不想关心的事情。
但我不必这样做。 谢谢jQuery
这个故事的寓意是。 如果jQuery有一个方法,它可能有一个很好的理由,很可能与兼容性有关。
如果你最近沒有讀過[jQuery方法清單][1],我建議你看看。
我做了一个简单的代码,不'甚至不需要JQuery,可能会帮助一些人。 它得到'ID1'.的总高度,加载后在'ID2'上使用。 的总高度,并将其用于'ID2'。
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
那么只要设置好机身加载
<body onload='anyName()'>
嗯,我们可以得到元素几何......
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);
这个纯JS怎么样?
那么这就是答案吗?
"如果你需要计算一些东西但不显示它,将元素设置为visibility:hidden
和position:absolute
,将其添加到DOM树中,获取offsetHeight,然后将其删除。
(上次我检查时,原型库在行后就是这么做的)."。
我在一些元素上也有同样的问题。 网站上没有jQuery或Prototype可以使用,但如果它有效的话,我'都赞成借用这种技术。 举例说明一些失败的事情,然后是成功的事情,我有以下代码。
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
基本上是什么都试,什么都试,结果都是零。 客户端高度(ClientHeight)没有影响。 对于有问题的元素,我通常在Base中得到NaN,在Offset和Scroll高度中得到零。 然后我尝试了添加DOM的解决方案和clientRects,看看是否在这里工作。
2011年6月29日。 我确实更新了代码,同时尝试了添加到DOM和clientHeight,结果比我预期的要好。
1)clientHeight也是0。
2)DOM居然给了我一个高度,真是太好了。
3)ClientRects返回的结果和DOM技术几乎一样。
因为添加的元素是流动的,当它们被添加到一个本来是空的DOM Temp元素中时,它们会根据这个容器的宽度来渲染。 这就变得很奇怪了,因为这比它最终的长度短了30px。
我添加了一些快照来说明高度是如何计算的。 ![正常渲染的菜单块][1]。 !"菜单块添加到DOM温度元素中"[2]。
高度差异很明显。 我当然可以添加绝对定位和隐藏,但我相信这不会有任何效果。 我继续坚信这样是不行的!
(我再离题)高度出来(渲染)比真实渲染的高度低。 这可以通过设置DOM Temp元素的宽度来解决,理论上可以做到相当准确。 我也不知道删除它们并将它们添加回现有位置会有什么结果。 由于它们是通过innerHTML技术到达的,我将使用这种不同的方法来寻找。
HOWEVER 这些都是不必要的。 事实上,它的工作与广告一样,并返回正确的高度!!!
当我能够让菜单再次可见时,令人惊奇的是,DOM已经根据页面顶部的流体布局返回了正确的高度(279px)。 上面的代码还使用了getClientRects,它返回的高度是280px。
这在下面的快照中得到了说明(取自Chrome浏览器,一旦工作。 ![在此输入图片描述][3] 。
现在我不知道为什么那个原型技巧能用,但似乎能用。 另外,getClientRects也能用。
我怀疑这些特殊元素的所有麻烦的原因是使用了innerHTML而不是appendChild,但这只是目前的猜测。
[1]: http://i.stack.imgur.com/roB7P.jpg [2]: http://i.stack.imgur.com/iaDFY.jpg [3]: http://i.stack.imgur.com/CsKMv.jpg
有时offsetHeight会返回0,因为你创建的元素还没有在Dom中呈现。 我为这种情况写了这个函数。
function getHeight(element)
{
var e = element.cloneNode(true);
e.style.visibility = "hidden";
document.body.appendChild(e);
var height = e.offsetHeight + 0;
document.body.removeChild(e);
e.style.visibility = "visible";
return height;
}
如果你已经使用jQuery,你最好的选择是.externalHeight()
或.height()
,就像已经说过的那样。
如果没有jQuery,你可以检查使用中的方框大小,然后把各种paddings+borders+clientHeight加起来,或者你可以使用getComputedStyle。
var h = getComputedStyle(document.getElementById('someDiv')).height;
h
现在将是一个像"53.825px"的字符串。
我找不到引用,但我想我听说getComputedStyle()
可能很贵,所以你可能不想在每个window.onscroll
事件中调用它(但jQuery的height()
也是如此)。
如果我对你的问题理解正确,那么也许这样的东西会有帮助。
function testDistance(node1, node2) {
/* get top position of node 1 */
let n1Pos = node1.offsetTop;
/* get height of node 1 */
let n1Height = node1.clientHeight;
/* get top position of node 2 */
let n2Pos = node2.offsetTop;
/* get height of node 2 */
let n2Height = node2.clientHeight;
/* add height of both nodes */
let heightTogether = n1Height + n2Height;
/* calculate distance from top of node 1 to bottom of node 2 */
let actualDistance = (n2Pos + n2Height) - n1Pos;
/* if the distance between top of node 1 and bottom of node 2
is bigger than their heights combined, than there is something between them */
if (actualDistance > heightTogether) {
/* do something here if they are not together */
console.log('they are not together');
} else {
/* do something here if they are together */
console.log('together');
}
}