get height of divs, all in a hidden div

Question

looking for a JavaScript solution (jQuery will be fine) to getting the height of some divs which all reside in a parent div with display set to none.

pseudo code:

<div id="hiddenParent" style="display:none">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>

let's say class ChildDiv does not specify height, nor is the height of any of the childDiv elements set anywhere.

any ideas on how to get their height, when "hiddenParent" is set to display:none ?

thank you for the answers/feedback. i was hoping for a solution which would any trickery/cleverness such as displaying a cloned div super far off the screen, etc. i do appreciate the help. i think i may just resize the children when the parent is displayed, although it will likely cause some undesired visual affects when the script is running :/ — Seth, Aug 31 '12 at 18:10

score 2 · Answer 1 · answered Aug 31 '12 at 17:55

2

var clone = $("#hiddenParent").clone().css("display","block").css("position","absolute").css("left","-9999px");
$("#hiddenParent").after(clone);

alert(clone.outerHeight());
clone.remove();

Uses jQuery.

answered Aug 31 '12 at 17:55

Chris Carew

1,398
10
6

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

Try taking a look at jQuery: Get height of hidden element in jQuery

There are many good posts regarding this issue.

edited May 23 '17 at 12:16

Community

1
1

answered Aug 31 '12 at 17:55

Chase

29,019
1
49
48

score 1 · Answer 3 · answered Aug 31 '12 at 17:57

You could hide the div after jQuery gets the height of the element.

HTML (minus style)

<div id="hiddenParent">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>

JQ

var height = $(".childDiv").height();
$("#hiddenParent").hide();
alert(height);

http://jsfiddle.net/charlescarver/2Ndte/

_{Note: This code is just an example, and will only get the height of the first child, but you get the gist of how you can get the height of a hidden element.}

Aurelio · Answer 4 · 2017-05-24T11:26:36.643

Late to the party but I'll give my take on this one anyway. The following solution is written in Vanilla Javascript but the same logic applies to jQuery obviously.

Elements do not necessarily need to be visibile to be measured, they just need not to be display: none;. Display:none means 0 height in the computed style, so we have to find a workaround.

We can sort of emulate a display:none in two easy steps:

we set visibility:hidden (so the element is not visible)
we set position:absolute (so the element takes no space)

Then we'll set its display to block (or empty string, it doesn't matter as long as it's not none). We will then have an invisible div that will take no space in the document but will retain its own original dimensions. This way it will be fully accessible through JavaScript, even if no dimension was previosuly set in the css.

In a loop we'll run getComputedStyle against each div we need, looking for its height.

 // start loop

 getComputedStyle(el).getPropertyValue('height');

 // end loop

If you still need to have the display set to none at the end of the loop you can restore it. The script is nothing complicated really, and runs without any flickering.

Here's a demo.

var par = document.getElementById('hiddenParent'),
    cd = par.querySelectorAll('.childDiv'),
    len,
    heights = [],
    i;

function getHeight(){
    len = cd.length;
  // 1.we hide the parent
    par.style.visibility = 'hidden';
  // 2. we set its position to absolute, so it does not 
  // take space inside the window
    par.style.position = 'absolute';
  // 3. we set its display to block so it will gain back its natural height
    par.style.display = 'block';   

  // 4. we start looping over its children
    while(len--){
  // we get the height of each children... here we're just storing them in array,
  // which we will alert later
      heights[len] = window.getComputedStyle( cd[len] ).getPropertyValue('height');
    }
  // 5. Job is done, we can bring back everything to normal (if needed)
    par.cssText = 'display: none';   
}

document.getElementById('starter').addEventListener('click',function(){
   getHeight();
   alert(heights);
});

#hiddenParent, .another-div{
    background: teal;
    width: 40%;
    padding: 20px;
    text-align: center;
    color: white;
    font-family: Arial;
    text-transform: uppercase;
    color: #ccc;
}
.childDiv{
    background: purple;
    padding: 10px;
    margin-bottom: 10px;
}

.another-div{
    background: orange;
    color: #1F9091;
}

<button id="starter"> Calculate heights </button>

<!-- hiddenParent is between two other divs but takes no space in the document as it's display:none -->
<div id="hiddenParent" style="display: none;">
  <div class="childDiv">child div 1</div>
  <div class="childDiv">child div 2</div>
  <div class="childDiv">child div 3</div>
</div>


<div class="another-div">
    here's another div
</div>

Or you could just invoke window.getComputedStyle(elem).getPropertyValue("height"), works even when hidden! — Ashwin Prabhu, May 07 '15 at 12:01

get height of divs, all in a hidden div

4 Answers4