height( function( index, height ) )

jQuery API の height( function( index, height ) ) は、マッチした要素の高さを、function関数で指定した値に設定するメソッド。その際、インデックス番号と、現在の高さの値を、引数として、function関数に引き渡すことができる。このメソッドで設定する高さは、CSSのheightプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。

引数

function( index, height )

CSSのheightプロパティに設定できる値を返す関数。

「インデックス番号」と、「現在の高さの値」を、引数として、function関数に引き渡すことができる。

index

インデックス番号

height

現在の高さの値。CSSのheightプロパティの現在の値。

戻り値

jQuery

jQueryオブジェクト。

記述方法

jQuery( セレクター ) . height( function( インデックス番号, 現在の高さの値 ) {
    return 新たに設定する高さの値;
} );

「セレクター」にマッチした要素の高さを、「新たに設定する高さの値」に指定した値に設定する。その際、「インデックス番号」と、「現在の高さの値」を、引数として、function関数に引き渡すことができる。

記述例

jQuery( '.jquery-sample' ) . height( function( index, height ) {
    return height + 25;
} );

クラス名が「jquery-sample」である要素の高さを、現在の高さの値に「25px」を足した値に設定する。

実装例(サンプル)

高さ:

実装例(サンプル)の動作について

「±5px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、5px長くする。「±5px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、5px短くする。

「±10px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、10px長くする。「±10px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、10px短くする。

「±25px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、25px長くする。「±25px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、25px短くする。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample button' ) . toggle(
        function () {
            addHeight = new Number( jQuery( this ) . val() );
            jQuery( '#jquery-sample-height > div' ) . height( function( index, oldHeight ) {
                return oldHeight + addHeight;
            } );
        },
        function () {
            addHeight = new Number( jQuery( this ) . val() );
            jQuery( '#jquery-sample-height > div' ) . height( function( index, oldHeight ) {
                return oldHeight - addHeight;
            } );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    width: 300px;
    height: 125px;
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-sample-height div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        高さ:
        <button value="5" >±5px</button>
        <button value="10" >±10px</button>
        <button value="25" >±25px</button>
    </p>
    <div id="jquery-sample-height">
        <div style="background-color: red;"></div>
        <div style="background-color: blue;"></div>
        <div style="background-color: green;"></div>
        <span style="clear: left;"></span>
    </div>
</div>

スポンサード リンク

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