outerHeight( [includeMargin] )

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>

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>

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>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, スタイルプロパティ, 寸法 タグ: パーマリンク