How to find actual height or width of an HTML element whose display is none

Question

Some elements in my web application are having display none and I wish to find their actual height to do some computations. I am using jquery 1.6 library to find the height but it returns incorrect value for the height and width of hidden elements havin height in percentage. Here is a jsfiddle example for the same: http://jsfiddle.net/LT9fU/ Can anyone suggest the correct way to find the dimensions of hidden HTML elements.

Here is the jsfiddle example for reference

HTML:

<body>
<div class="wrapper">
    <div class="vsbl"></div>
    <div class="hdn"></div>
</div>

CSS:

.wrapper{
  height:300px;
  width:300px;
  border:1px solid black
}
.vsbl,.hdn{
  height:100px;
  width:70%;
  margin:10px;
  border:1px solid black;     
}
.hdn{
  display:none;
}

Javascript:

$().ready(function(){
  var content = "";
  content += $(".vsbl").width() + "<br>";
  content += $(".hdn").width();
  document.body.innerHTML += content;
});

The output I got were 210 for visible block and 392 for hidden block.

You will not get a right width for elements with `display:none`. You could set the elements `opacity:0` to calculate the width. However if you set the width to an absolute value like 100px in the css you can read it from there with `.css('width')` — Sebastian Otto, Mar 13 '14 at 16:47
http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none — The Alpha, Mar 13 '14 at 16:49
Also, here: http://stackoverflow.com/questions/1473584/need-to-find-height-of-hidden-div-on-page-set-to-displaynone — Jason M. Batchelor, Mar 13 '14 at 16:51
based on the answers from http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none and http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery I prepared two fiddles http://jsfiddle.net/bsn52/ and http://jsfiddle.net/XcV43/ still the heights are not same for all cases — user3416346, Mar 14 '14 at 05:26

score 1 · Answer 1 · answered Mar 13 '14 at 16:48

1

im not sure how browsers handle hidden elements, but to be sure you could create a span with jQuery, append your element inside and user $(that span).width()

something of this sort:

$("<span>" + inner html of your element +"</span>").width();

answered Mar 13 '14 at 16:48

Banana

7,424
3
22
43

score 0 · Answer 2 · answered Mar 13 '14 at 16:52

0

You may not get the size of an element that has display: none.

Some alternatives are:

Set the element as visibility: hidden
Position the element outside the viewport (ex: left:-10000px)

answered Mar 13 '14 at 16:52

Leonardo Delfino

1,488
10
20

score -1 · Answer 3 · answered Mar 13 '14 at 17:03

try this (works without jQuery):

<div class="wrapper">
  <div id="vsbl"></div>
  <div id="hdn"></div>
</div>

javascript:

var content = document.getElementById('hdn').style.width + "<br />";
var content += document.getElementById('hdn').style.height;
document.body.innerHTML += content;

I hope it works!

How to find actual height or width of an HTML element whose display is none

3 Answers3