jQuery API の outerHeight( [includeMargin] ) は、最初にマッチした要素の、paddingとborderを含む高さを、取得するメソッド。引数[includeMargin]にtrueを設定すると、paddingとborderとmarginを含む高さを、取得する。
引数
- [includeMargin]
marginを含めるか含めないかを決める、booleanType（論理型）オプション。
trueを設定すると、paddingとborderとmarginを含む高さを、取得する。
falseを設定すると、paddingとborderを含む高さを、取得する。
戻り値
- Integer
整数値。
記述方法
outerHeight()
jQuery( セレクター ) . outerHeight();
「セレクター」に最初にマッチした要素の、paddingとborderを含む高さを、取得する。
outerHeight( true )
jQuery( セレクター ) . outerHeight( true );
「セレクター」に最初にマッチした要素の、paddingとborderとmarginを含む高さを、取得する。
記述例
jQuery( '.jquery-sample' ) . outerHeight();
クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の、paddingとborderを含む高さを取得する。
jQuery( '.jquery-sample' ) . outerHeight( true );
クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の、paddingとborderとmarginを含む高さを取得する。
実装例（サンプル）
高さ：
実装例（サンプル）の動作について
- 「height()」ボタンをクリックすると、高さを取得し、「高さ：」の右側に、「25px [ height() ]」と表示する。
- 「innerHeight()」ボタンをクリックすると、paddingを含む高さを取得し、「高さ：」の右側に、「75px [ innerHeight() ]」と表示する。
- 「outerHeight()」ボタンをクリックすると、paddingとborderを含む高さを取得し、「高さ：」の右側に、「125px [ outerHeight() ]」と表示する。
- 「outerHeight( true )」ボタンをクリックすると、paddingとborderとmarginを含む高さを取得し、「高さ：」の右側に、「175px [ outerHeight( true ) ]」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-height' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . height();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ height() ]' );
} );
jQuery( '#jquery-sample-button-innerHeight' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . innerHeight();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ innerHeight() ]' );
} );
jQuery( '#jquery-sample-button-outerHeight' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerHeight();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerHeight() ]' );
} );
jQuery( '#jquery-sample-button-outerHeight-true' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerHeight( true );
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerHeight( true ) ]' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-height' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . height();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ height() ]' );
} );
jQuery( '#jquery-sample-button-innerHeight' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . innerHeight();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ innerHeight() ]' );
} );
jQuery( '#jquery-sample-button-outerHeight' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerHeight();
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerHeight() ]' );
} );
jQuery( '#jquery-sample-button-outerHeight-true' ) . click( function () {
var str = jQuery( '#jquery-sample-div' ) . outerHeight( true );
jQuery( '#jquery-sample-message' ) . text( str + 'px [ outerHeight( true ) ]' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 430px;
height: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div {
width: 25px;
height: 25px;
margin: 25px;
padding: 25px;
background-color: blue;
border: 25px solid red;
}
-->
</style>
<!--
#jquery-sample {
width: 430px;
height: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-div {
width: 25px;
height: 25px;
margin: 25px;
padding: 25px;
background-color: blue;
border: 25px solid red;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
高さ：<span id="jquery-sample-message"></span>
</p>
<p>
<button id="jquery-sample-button-height">height()</button>
<button id="jquery-sample-button-innerHeight">innerHeight()</button>
<button id="jquery-sample-button-outerHeight">outerHeight()</button>
<button id="jquery-sample-button-outerHeight-true">outerHeight( true )</button>
</p>
<div id="jquery-sample-div"></div>
</div>
<p>
高さ：<span id="jquery-sample-message"></span>
</p>
<p>
<button id="jquery-sample-button-height">height()</button>
<button id="jquery-sample-button-innerHeight">innerHeight()</button>
<button id="jquery-sample-button-outerHeight">outerHeight()</button>
<button id="jquery-sample-button-outerHeight-true">outerHeight( true )</button>
</p>
<div id="jquery-sample-div"></div>
</div>