Menu
How do you get the rendered height of an element?
Let's say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. 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.
574
In JavaScript, you can use the clientHeight property, which returns an element's height, including its vertical padding. Basically, it returns the actual space used by the displayed content. For example, the following code returns 120, which is equal to the original height plus the vertical padding.
Method 1: The height() method returns the first matched element's height, But the height(value) method sets all matched elements height. // Returns the height of the first matched element $(selector). height() // Set the height of the all matched elements $(selector). height(value);
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value. Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.
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.
146
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!
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
