1

I have a div with style="display:none". After placing some content inside, i calculate its height using height() method of JQuery. This is working fine and returning correct height.

But, I came across this post and came to know that, an element with style="display:none" will have 0 height and width. So, ideally, I had to change 'display:none' to 'visibility:hidden' and use height() method or use other alternatives to get correct height.

But, then, how my code work when calling height() method of JQuery on a div style="display:none"? Is this going to be a consistent behavior?

In other words, height() method does not differentiate between display:none and display:block. IS this a consistent behavior? offset height is 0 if display is none as expected.

Kiran
  • 896
  • 1
  • 6
  • 25
  • It returns the value of the active rule, except that some units like `%` can't be calculated, so there you'd get the authored value. Now, why do you want this? `.height()` returns the computed height, which even with block elements may not be its actual rendered height (think of `scale` etc.) – Kaiido Apr 12 '20 at 11:26
  • Though it's javascript, you should be able to figure this out for jquery (duplicate): https://stackoverflow.com/questions/59509409/how-to-get-displaynoneelement-height-using-pure-javascript – Rob Apr 12 '20 at 11:28
  • May be I was not clear. height() method does not differentiate between display:none and display:block. offset height is 0 if display is none as expected. – Kiran Apr 12 '20 at 11:30

2 Answers2

1

jQuery.height() and .width() do return the computed style of your element, not its actual height and width.

That an element has its display set to none will only change the fact that relative units can't be calculated, so you'd get % values returned as percentage.

Other than that, there is no difference, since it's only the computed styles and not the actual size of your element.

Now jQuery will try its best to convert that percent value to an actual px number, that is, it will return the computed size of the parent per the ratio set, but this, only to one level depth.

console.log( 'display-none $height', $('#display-none').height() );
console.log( 'display-block $height', $('#display-block').height() );
console.log( 'display-none-deep $height', $('#display-none-deep').height() );
console.log( 'display-none $width', $('#display-none').width() );
console.log( 'display-block $width', $('#display-block').width() );
console.log( 'display-none computed height', getComputedStyle($('#display-none')[0] ).height );
console.log( 'display-block computed height', getComputedStyle($('#display-block')[0] ).height );
console.log( 'display-block real height', $('#display-block')[0].getBoundingClientRect().height );
div[id^="display"] { 
  height: 50%;
  width: 200px;
  transform-origin: top left;
  transform: scale(1.5,1.5); /* won't change anything for computed values */
}
#display-none {
  display: none;
}
body{ height: 100vh;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="display-none">
  <div id="display-none-deep"></div>
  hidden
</div>
<div id="display-block">visible</div>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
0

In jquery jQuery.height() returns the actual height of the element which contains the "display: none" OR "visibility: hidden". But it may be changed as per the child and parent element styles.

Please imagine the situation, the HTML page contains only one div and it has 100px height. Then Jquery.height() returns the value the same for when we applied "display: none" OR "visibility: hidden" in the element.

But the difference between the two style properties are:

"display: none": - the tag will not appear in rendering but Jquery can interact with DOM, that's why the function returning the actual height of the element.

"visibility: hidden":- the tag will appear and 100 px height is allocated there and blank space can see in the site.

For example, in the train seat reservation system if you reserved a seat on a train that no one can use that seat but in the general compartment, the people can use the seat when it will free.

So ' display: none' and 'visibility: hidden' has a consistent behavior in jquery. But the height will increase or decrease for the parent element of the div.

So please select the option as per your requirement, I think that the display: none is the correct option for your requirement.

MITHESH K M
  • 36
  • 4