（jQueryの学習）CSS：高さを操作する／outerHeightメソッド／borderの外側の高さを取得する

CSSの高さを操作する方法の3回目です。

本日は「3.borderの外側の高さ(border、paddingを含む)を取得する」を学びます。

3.borderの外側の高さ(border、paddingを含む)を取得する

3-1.outerHeightメソッド【返却値(数値) = 要素.outerHeight([True])】でborderの外側の高さを取得する

次にouterHeightを取得します。

outerHeightとは「borderの外側の高さ」を表します。
つまり、「上下のborder＋上下のpadding＋height＝outerHeight」です。

なお、引数に「True」を設定することで、
「marginを含んだ高さ（エリア全体の高さ）」を取得することもできます。
つまり、「上下のmargin＋上下のborder＋上下のpadding＋height＝outerHeight」です。

利用方法はheightメソッドと同様。

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の高さが表示されます"><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(){
    // 【構文】返却値(数値) = 要素.outerHeight([True])
    //   サンプル：「テストエリア１」のborderの外側の高さを取得する
    alert("[" + $(".box-css-test-area-1").outerHeight() + "]");     // marginを含まない
    alert("[" + $(".box-css-test-area-1").outerHeight(True) + "]"); // marginを含む
  });
});

実装例

指定した要素に設定されているborderの外側の高さを取得します。

要素: テストエリア１テストエリア２ 　marginも含む:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
CSSの高さを操作する方法や、
height、innerHeight、outerHeightの違いが分かったと思います。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share