引き続き、要素の高さを取得／設定する方法を学びます。
今回は、要素の高さを設定します。
「テストエリア」の高さを変えてみます。
値は「50」と数値型で指定することもできます。
また、算術複合代入子（+=、-=）を使用した相対的な指定も可能になっています。
いかがでしたか？
次回は「2.borderの内側の高さ(borderは除き、paddingは含む)を取得する」を学びます。
それでは、また。
今回は、要素の高さを設定します。
1-4.heightメソッド【返却値(jQueryオブジェクト) = 要素.height(値)】で要素の高さを設定する
次に要素の高さを変更します。「テストエリア」の高さを変えてみます。
値は「50」と数値型で指定することもできます。
また、算術複合代入子（+=、-=）を使用した相対的な指定も可能になっています。
サンプルソース
// HTML
<input type="button" value="指定したテストエリアの高さを10px大きくする"><br>
<div class="box">
<div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>
// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
// jQuery
$(function() {
$("input[type=button]").click(function(){
// 【構文】返却値(jQueryオブジェクト) = 要素.height(値)
// サンプル：「テストエリア１」の高さを設定する
$(".box-css-test-area-1").height(50); // ←絶対値指定（高さを50pxにする）
$(".box-css-test-area-1").height("+=50"); // ←相対値指定（今の高さから50px高くする）
});
});
実装例
指定した要素に設定されている高さを取得します。
要素:
要素:
テストエリア１
border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）
テストエリア２
border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）
いかがでしたか？
次回は「2.borderの内側の高さ(borderは除き、paddingは含む)を取得する」を学びます。
それでは、また。
