.outerHeight()
Categories: Style Properties | CSS | Dimensions
.outerHeight( [ includeMargin ] )Returns: Integer
Description: Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
-
.outerHeight( [ includeMargin ] )
version added: 1.0includeMargin A Boolean indicating whether to include the element's margin in the calculation.
The top and bottom padding and border are always included in the .outerHeight()
calculation; if the includeMargin
argument is set to true
, the margin (top and bottom) is also included.
This method is not applicable to window
and document
objects; for these, use .height()
instead.
-
Get the outerHeight of a paragraph.
HTML:
<p>Hello</p><p></p>
CSS:
p { margin:10px;padding:5px;border:2px solid #666; }
Code:
var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
.outerHeight( value, [ includeMargin ] )Returns: jQuery
Plugin: jQuery.fn.size
Description: Set the current computed height for each element in the set of matched elements, including padding and border.
-
.outerHeight( value, [ includeMargin ] )
version added: 1.0value An integer representing the number of pixels.
includeMargin A Boolean indicating whether to include the element's margin in the calculation.
This method set the height of the element, including top and bottom padding, border, and optionally margin, in pixels.
This method is not applicable to window and document objects.
-
Set the outer height of all div elements with class box.
HTML:
<div class="box"></div>
CSS:
.box { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px }
Code:
$('div').outerHeight(300);
Results:
<div class="box" style="height: 270px;"></div>
-
Set the outer height inclusive margin of all div elements with class box.
HTML:
<div class="box"></div>
CSS:
.box { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px }
Code:
$('div').outerHeight( 300, true );
Results:
<div class="box" style="height: 240px;"></div>