Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.
Contents:
.outerHeight( [includeMargin ] )Returns:
Description: Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.
version added: 1.2.6
- includeMargin (default: false) A Boolean indicating whether to include the element's margin in the calculation.
Returns the height of the element, including top and bottom padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns undefined (null before jQuery 3.0).
This method is not applicable to window and document objects; for these, use .height() instead. Although .outerHeight() can be used on table elements, it may give unexpected results on tables using the border-collapse: collapse CSS property.
Additional Notes:
- The number returned by dimensions-related APIs, including .outerHeight(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
- The value reported by .outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .outerHeight(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
Example:
Get the outerHeight of a paragraph.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<title>outerHeight demo</title>
<script src="//code.jquery.com/jquery-3.7.0.js"></script>
var p = $( "p" ).first();
"outerHeight:" + p.outerHeight() +
" , outerHeight( true ):" + p.outerHeight( true ) );
Demo:
.outerHeight( value [, includeMargin ] )Returns:
Description: Set the CSS outer height of each element in the set of matched elements.
version added: 1.8
- value A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
- includeMargin (default: false) A Boolean indicating whether to new value should account for the element's margin.
version added: 1.8
- function
A function returning the outer height to set. Receives the index position of the element in the set and the old outer height as arguments. Within the function,
<title>outerHeight demo</title> <script src="//code.jquery.com/jquery-3.7.0.js"></script> $( "div" ).one( "click", function() { $( this ).outerHeight( modHeight ).addClass( "mod" ); 4 refers to the current element in the set.
- function
When calling
<title>outerHeight demo</title>
<script src="//code.jquery.com/jquery-3.7.0.js"></script>
$( "div" ).one( "click", function() {
$( this ).outerHeight( modHeight ).addClass( "mod" );
5, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as
<title>outerHeight demo</title>
<script src="//code.jquery.com/jquery-3.7.0.js"></script>
$( "div" ).one( "click", function() {
$( this ).outerHeight( modHeight ).addClass( "mod" );
6,
<title>outerHeight demo</title>
<script src="//code.jquery.com/jquery-3.7.0.js"></script>
$( "div" ).one( "click", function() {
$( this ).outerHeight( modHeight ).addClass( "mod" );
7, or
<title>outerHeight demo</title>
<script src="//code.jquery.com/jquery-3.7.0.js"></script>
$( "div" ).one( "click", function() {
$( this ).outerHeight( modHeight ).addClass( "mod" );
8).
How to get the height of an element using jQuery?
The height() method is an inbuilt method in jQuery that is used to check the height of an element but it will not check the padding, border, and margin of the element. Parameters: This function does not accept any parameter. Return value: It returns the height of the selected element.nulljQuery height() and innerHeight() Methods - GeeksforGeekswww.geeksforgeeks.org › jquery-height-and-innerheight-methodsnull
How to set height dynamically in jQuery?
The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement.nullHow to dynamically set the height and width of a div element using jQuerywww.geeksforgeeks.org › how-to-dynamically-set-the-height-and-width-of...null
How to get the height of an element from the top in JavaScript?
clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.nullHow to get the rendered height of an element ? - GeeksforGeekswww.geeksforgeeks.org › how-to-get-the-rendered-height-of-an-elementnull
How to get the height of a specific element in JavaScript?
The offsetHeight property returns the height of an element, including its padding and border, but not including its margin. The value is calculated in pixels and is read-only, meaning it cannot be changed.nullHow to get the element's actual width and height in JavaScriptwww.geeksforgeeks.org › how-to-get-the-elements-actual-width-and-heigh...null