你如何获得元素的渲染高度?

你如何获得元素的渲染高度?

假设你有一个内部有一些内容的<div>元素。 里面的这个内容将会扩展<div>的高度。 当你没有明确设置高度时,如何获得“已渲染”高度? 显然,我试过了:

 var h = document.getElementById('someDiv').style.height; 

有这样做的伎俩吗? 如果有帮助,我正在使用jQuery。

它应该是

 $('#someDiv').height(); 

与jQuery。 这将检索包装集中第一个项目的高度,作为一个数字。

试图使用

 .style.height 

只有在您将财产设置在首位时才有效。 不是很有用!

尝试一下:

 var h = document.getElementById('someDiv').clientHeight; var h = document.getElementById('someDiv').offsetHeight; var h = document.getElementById('someDiv').scrollHeight; 

clientHeight包含高度和垂直填充。

offsetHeight包括高度,垂直填充和垂直边框。

scrollHeight包含所包含的文档的高度(在滚动时大于高度),垂直填充和垂直边框。

非JQUERY, 因为在这些答案的顶部有一堆使用elem.style.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/

你可以使用.outerHeight()来达到这个目的。

它会给你元素的完整渲染高度。 另外,您不需要设置元素的任何css-height 。 为了防范,您可以保持高度自动,以便按照内容的高度进行渲染。

 //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的网站或者一个详细的帖子

它将清除.height() / innerHeight() / outerHeight()之间的区别

我做了一个简单的代码,甚至不需要JQuery,可能会帮助一些人。 它获得“ID1”的总高度,并在“ID2”上使用它,

 function anyName(){ var varname=document.getElementById('ID1').offsetHeight; document.getElementById('ID2').style.height=varname+'px'; } 

然后设置正文加载它

 <body onload='anyName()'> 

绝对使用

 $('#someDiv').height() // to read it 

要么

 $('#someDiv').height(newHeight) // to set it 

我发布这个作为一个额外的答案,因为这是我刚刚学到的一些重要的事情。

我刚刚陷入了使用offsetHeight的陷阱。 这是发生了什么事:

  • 我用了一个很好的使用调试器的技巧来“观察”我的元素有什么属性
  • 我看到哪一个价值围绕着我期望的价值
  • 它被抵消了 – 所以我用了。
  • 然后我意识到它没有与隐藏的DIV工作
  • 在计算maxHeight之后,我试图隐藏起来,但看起来很笨拙 – 陷入了一片混乱。
  • 我做了一个搜索 – 发现jQuery.height() – 并使用它
  • 发现高度()即使在隐藏的元素
  • 只是为了好玩,我检查了高度/宽度的jQuery实现

这只是其中的一部分:

 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的方法列表,我建议你看看。

那么这是答案吗?

“如果你需要计算一些东西,但不显示它,将元素设置为visibility:hiddenposition:absolute ,将其添加到DOM树,获得offsetHeight,并将其删除(这是原型库在行后面我检查过)“。

我对一些元素也有同样的问题。 没有jQuery或原型在网站上使用,但我都赞成借用技术,如果它的工作。 作为一些失败的例子,其次是做了什么,我有以下代码:

 // 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没有任何影响。 对于问题元素,我通常会在基础中获得NaN,在偏移和滚动高度中获得零。 然后我尝试添加DOM解决方案和clientRects,看看它是否在这里工作。

2011年6月29日,我确实更新了代码,尝试向DOM和clientHeight添加比我预期更好的结果。

1)clientHeight也是0。

2)Dom实际上给了我一个很棒的高度。

3)ClientRects返回的结果几乎与DOM技术相同。

因为所添加的元素本质上是流体的,所以当它们被添加到否则空的DOM Temp元素时,它们将根据该容器的宽度被渲染。 这会变得很奇怪,因为比最终结果还要短30px。

我添加了几个快照来说明如何计算高度的不同。 菜单块正常渲染添加到DOM Temp元素的菜单块

高度差异是显而易见的。 我当然可以添加绝对的定位和隐藏,但我相信这将没有任何效果。 我仍然坚信这是行不通的!

(我进一步离题)高度出现(渲染)低于真正的渲染高度。 这可以通过设置DOM Temp元素的宽度来匹配现有父级来解决,并且可以在理论上相当准确地完成。 我也不知道删除它们并将它们添加回现有位置会导致什么结果。 当他们通过innerHTML技术到达时,我将使用这种不同的方法。

*但是,没有一个是必要的。 事实上,它像广告一样工作,并返回正确的高度!

当我能够让菜单再次出现时,DOM令人吃惊地返回了页面顶部流体布局的正确高度(279px)。 上面的代码也使用返回280px的getClientRects。

这在下面的快照(从Chrome一次工作中获得)中说明。
在这里输入图像描述

现在我不知道为什么这个原型技巧可行,但似乎。 另外,getClientRects也可以。

我怀疑这些特定元素的所有这些麻烦的原因是使用innerHTML而不是appendChild,但这是纯粹的猜测。

offsetHeight ,通常。

如果您需要计算某些内容但不显示它,请将元素设置为visibility:hiddenposition:absolute ,将其添加到DOM树中,获取offsetHeight并将其删除。 (这是原型库在上次我检查后在幕后做的)。

 style = window.getComputedStyle(your_element); 

那么只需: style.height

有时offsetHeight将返回零,因为你创建的元素还没有在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,那么您最好的选择是.outerHeight().height().height()

没有jQuery,你可以检查正在使用的框大小,并添加各种填充+边框+ clientHeight, 或者你可以使用getComputedStyle :

var h = getComputedStyle(document.getElementById('someDiv'))。height;

现在h将是一个像“53.825px”的字符串。

而我找不到引用,但我想我听说getComputedStyle()可能是昂贵的,所以它可能不是你想要调用每个window.onscroll事件(但是,既不是jQuery的height() )。

有了MooTools:

$( 'someDiv')。的getSize()。ÿ

你有没有特别设置CSS的高度? 如果你不需要使用offsetHeight; 而不是height

 var h = document.getElementById('someDiv').style.offsetHeight;