jQuery get the rendered height of an element

Question

How do you get the rendered height of an element   Let s say you have a  lt div gt  element with some content inside  This content inside is going to stretch the height of the  lt div gt   How do you get the  rendered  height when you haven t explicitly set the height  Obviously  I tried     var h   document getElementById  someDiv   style height    Is there a trick for doing this  I am using jQuery if that helps

User · Answer

So is this the answer     If you need to calculate something but not show it  set the element to visibility hidden and position absolute  add it to the DOM tree  get the offsetHeight  and remove it   That s what the prototype library does behind the lines last time I checked     I have the same problem on a number of elements   There is no jQuery or Prototype to be used on the site but I m all in favor of borrowing the technique if it works   As an example of some things that failed to work  followed by what did  I have the following code      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  gt  thisHeight    thisHeight   heightBase              if  DoOffset            if  heightOffset  gt  thisHeight    thisHeight   heightOffset              if  DoScroll            if  heightScroll  gt  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  gt  thisHeight    thisHeight   heightNode                          Bounding Rect             Or this approach            var clientRects   elementPassed getClientRects            heightRects   clientRects height          if  heightRects  gt  thisHeight    thisHeight   heightRects                        Default height not appropriate here        if  thisHeight    0    thisHeight   elementHeightDefault        if  thisHeight  gt  3000               ERROR         thisHeight   3000            return thisHeight      which basically tries anything and everything only to get a zero result  ClientHeight with no affect   With the problem elements I typically get NaN in the Base and zero in the Offset and Scroll heights   I then tried the Add DOM solution and clientRects to see if it works here   29 Jun 2011  I did indeed update the code to try both adding to DOM and clientHeight with better results than I expected     1  clientHeight was also 0   2  Dom actually gave me a height which was great   3  ClientRects returns a result almost identical to the DOM technique   Because the elements added are fluid in nature  when they are added to an otherwise empty DOM Temp element they are rendered according to the width of that container   This get weird  because that is 30px shorter than it eventually ends up   I added a few snapshots to illustrate how the height is calculated differently     The height differences are obvious    I could certainly add absolute positioning and hidden but I am sure that will have no effect   I continued to be convinced this would not work    I digress further  The height comes out  renders  lower than the true rendered height   This could be addressed by setting the width of the DOM Temp element to match the existing parent and could be done fairly accurately in theory   I also do not know what would result from removing them and adding them back into their existing location   As they arrived through an innerHTML technique I will be looking using this different approach     HOWEVER   None of that was necessary  In fact it worked as advertised and returned the correct height     When I was able to get the menus visible again amazingly DOM had returned the correct height per the fluid layout at the top of the page  279px    The above code also uses getClientRects which return 280px   This is illustrated in the following snapshot  taken from Chrome once working     Now I have noooooo idea why that prototype trick works  but it seems to   Alternatively  getClientRects also works   I suspect the cause of all this trouble with these particular elements was the use of innerHTML instead of appendChild  but that is pure speculation at this point

User · Answer

NON JQUERY since there were a bunch of links using elem style height in the top of these answers     INNER HEIGHT  https   developer mozilla org en-US docs Web API Element clientHeight    document getElementById id attribute value  clientHeight    OUTER HEIGHT  https   developer mozilla org en-US docs Web API HTMLElement offsetHeight  document getElementById id attribute value  offsetHeight     Or one of my favorite references  http   youmightnotneedjquery com

User · Answer

With MooTools      someDiv   getSize   y

User · Answer

It should just be      someDiv   height      with jQuery  This retrieves the height of the first item in the wrapped set as a number    Trying to use   style height   only works if you have set the property in the first place  Not very useful

User · Answer

I made a simple code that doesn t even need JQuery and probably gonna help some people  It gets the total height of  ID1  after loaded and use it on  ID2   function anyName        var varname document getElementById  ID1   offsetHeight      document getElementById  ID2   style height varname  px       Then just set the body to load it   lt body onload  anyName    gt

User · Answer

style   window getComputedStyle your element     then simply  style height

User · Answer

I use this to get the height of an element  returns float   document getElementById  someDiv   getBoundingClientRect   height  It also works when you use the virtual DOM  I use it in Vue like this  this  refs  some-ref   getBoundingClientRect   height  For a Vue component  this  refs  some-ref    el getBoundingClientRect   height

User · Answer

Hm we can get the Element geometry     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     How about this plain JS

User · Answer

Have you set the height in the css specifically  If you haven t you need to use offsetHeight  rather than height  var h   document getElementById  someDiv   style offsetHeight

User · Answer

If you are using jQuery already  your best bet is  outerHeight   or  height    as has been stated   Without jQuery  you can check the box-sizing in use and add up various paddings   borders   clientHeight  or you can use getComputedStyle   var h   getComputedStyle document getElementById  someDiv    height   h will now be a string like a  53 825px    And I can t find the reference  but I think I heard getComputedStyle   can be expensive  so it s probably not something you want to call on each window onscroll event  but then  neither is jQuery s height

User · Answer

Definitely use       someDiv   height        to read it   or      someDiv   height newHeight      to set it   I m posting this as an additional answer because theres a couple important things I just learnt   I almost fell into the trap just now of using offsetHeight  This is what happened     I used the good old trick of using a debugger to  watch  what properties my element has  I saw which one has a value around the value I was expecting It was offsetHeight - so I used that   Then i realized it didnt work with a hidden DIV I tried hiding after calculating maxHeight but that looked clumsy - got in a mess  I did a search - discovered jQuery height   - and used it found out height   works even on hidden elements just for fun I checked the jQuery implementation of height width   Here s just a portion of it    Math max  Math max document body  scroll    name   document documentElement  scroll    name    Math max document body  offset    name   document documentElement  offset    name        Yup it looks at BOTH scroll and offset  If that fails it looks even further  taking into account browser and css compatibility issues  In other words STUFF I DONT CARE ABOUT - or want to   But I dont have to  Thanks jQuery    Moral of the story   if jQuery has a method for something its probably for a good reason  likely related to compatibilty   If you haven t read through the jQuery list of methods recently I suggest you take a look

User · Answer

You can use  outerHeight   for this purpose   It will give you full rendered height of the element  Also  you don t need to set any css-height of the element  For precaution you can keep its height auto so it can be rendered as per content s 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     For a clear view of these function you can go for jQuery s site or a detailed post here   it will clear the difference between  height     innerHeight     outerHeight

User · Answer

document querySelector   project list div   offsetHeight

User · Answer

offsetHeight  usually   If you need to calculate something but not show it  set the element to visibility hidden and position absolute  add it to the DOM tree  get the offsetHeight  and remove it   That s what the prototype library does behind the scenes last time I checked

User · Answer

Sometimes offsetHeight will return zero because the element you ve created has not been rendered in the Dom yet  I wrote this function for such circumstances   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

User · Answer

Try one of   var h   document getElementById  someDiv   clientHeight  var h   document getElementById  someDiv   offsetHeight  var h   document getElementById  someDiv   scrollHeight    clientHeight includes the height and vertical padding   offsetHeight includes the height  vertical padding  and vertical borders   scrollHeight includes the height of the contained document  would be greater than just height in case of scrolling   vertical padding  and vertical borders

User · Answer

If i understood your question correctly  then maybe something like this would help   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  gt  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

User · Answer

I think the best way to do this in 2020 is to use vanilla js and getBoundingClientRect   height  Here s an example  x000D   x000D  let div   document querySelector  div    let divHeight   div getBoundingClientRect   height   console log  Div Height    divHeight     x000D   lt div gt    How high am I    lt  div gt  x000D   x000D   x000D   On top of getting height this way  we also have access to a bunch of other stuff about the div   x000D   x000D  let div   document querySelector  div    let divInfo   div getBoundingClientRect     console log divInfo   x000D   lt div gt What else am I   lt  div gt  x000D   x000D   x000D

[jquery] jQuery get the rendered height of an element?

Examples related to jquery

Examples related to css

Examples related to height