Menu
Is there any way to get the height of an element if there is no CSS height rule set for the element I cannot use .height() jQuery method because it need a CSS rule set first? Is there any other way to get the height?
371
outerHeight() It returns the current height of the element including the padding, border and margin optionally. It always returns a unit-less pixel value. Syntax: let height = $("#div1").
You can use 2 properties, clientHeight and offsetHeight to get the height of the div. clientHeight includes padding of the div. offsetHeight includes padding, scrollBar, and borders of the div.
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box , however, it instead determines the height of the border area.
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);
jQuery .height will return you the height of the element. It doesn't need CSS definition as it determines the computed height.
DEMO
You can use .height(), .innerHeight() or outerHeight() based on what you need.
.height() - returns the height of element excludes padding, border and margin.
.innerHeight() - returns the height of element includes padding but excludes border and margin.
.outerHeight() - returns the height of the div including border but excludes margin.
.outerHeight(true) - returns the height of the div including margin.
Check below code snippet for live demo. :)
$(function() { var $heightTest = $('#heightTest'); $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"') .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>') .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>') .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>') .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>') });div { font-size: 0.9em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; "> </div>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
