jQuery API の height( value ) は、マッチした要素の高さを、valueに指定した値に設定するメソッド。このメソッドで設定する高さは、CSSのheightプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。
引数
- value
CSSのheightプロパティに設定できる値。
例：「200px」「75%」「auto」など。
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( セレクター ) . height( 高さの値 );
「セレクター」にマッチした要素の高さを、「高さの値」に指定した値に設定する。
記述例
jQuery( '.jquery-sample' ) . height( '50' );
クラス名が「jquery-sample」である要素の高さを、「50px」に設定する。
実装例（サンプル）
高さ：
実装例（サンプル）の動作について
「25px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、25pxにする。
「50px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、50pxにする。
「75px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の高さを、75pxにする。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample button' ) . click( function () {
var strHeight = jQuery( this ) . val();
jQuery( '#jquery-sample-height > div' ) . height( strHeight );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample button' ) . click( function () {
var strHeight = jQuery( this ) . val();
jQuery( '#jquery-sample-height > div' ) . height( strHeight );
} );
} );
// -->
</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>
<!--
#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="25" >25px</button>
<button value="50" >50px</button>
<button value="75" >75px</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>
<p>
高さ：
<button value="25" >25px</button>
<button value="50" >50px</button>
<button value="75" >75px</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>