height()

jQuery API の height() は、最初にマッチした要素の高さを取得するメソッド。このメソッドで取得する高さは、CSSのheightプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。

戻り値

Integer

整数値。

記述方法

jQuery( セレクター ) . height();

「セレクター」に最初にマッチした要素の高さを取得する。

記述例

jQuery( '.jquery-sample' ) . height();

クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の高さを取得する。

実装例(サンプル)

高さ:

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

赤色、青色、緑色の背景色のボックスの、いづれかのボックス要素をクリックすると、「高さ:」の右側に、クリックしたボックス要素の高さを、ボックス要素の背景色の色のテキストで表示する。

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-height > div' ) . click( function () {
        var strHeight = jQuery( this ) . height();
        var strBackgroundColor = jQuery( this ) . css( 'background-color' );
        jQuery( '#jquery-sample-message' ) . text( strHeight + 'px' ) . css( 'color', strBackgroundColor );
    } );
} );
// -->
</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;
    cursor: pointer;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        高さ:<span id="jquery-sample-message"></span>
    </p>
    <div id="jquery-sample-height">
        <div style="background-color: red; height: 25px;"></div>
        <div style="background-color: blue; height: 50px;"></div>
        <div style="background-color: green; height: 75px;"></div>
        <span style="clear: left;"></span>
    </div>
</div>

スポンサード リンク

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