.outerHeight()【要素の高さ(外側) 取得・設定】

メモ

構文

説明構文戻り値
要素の高さ(外側) 取得 .outerHeight( [includeMargin ] ) 1.2.6

Boolean includeMargin：マージン(外部間隔)部の有無 (デフォルト：false)
Number
要素の高さ(外側) 設定 .outerHeight( value ) 1.8.0

String  | Number value：単位付きの文字列等 ("100px"・"50%"・"auto") または 数値(px単位)
jQuery
.outerHeight( function ) 1.8.0

function：
引数説明
Integer indexインデックス位置
Number height元の高さ
戻り値説明
String
Number 		設定値
単位付きの文字列等 ("100px"・"50%"・"auto") または 数値(px単位)
jQuery

関連

例

<style>
.box {
  width: 50px;
  height: 100px;
  margin: 10px 20px 30px 40px;
  border: 3px red solid;
  padding: 5px 10px 15px 20px;

  float: left;
  text-align: center;
  color: white;
  background-color:blue;
}

#output { border:1px black solid; padding:1px 5px; }
.color1 { color: red; font-weight:bold; }
</style>

<div style="height:200px;">
<div id="id1" class="box">#id1</div>
<div id="id2" class="box">#id2</div>
<div id="id3" class="box change">#id3<br>class change</div>
<div id="id4" class="box change">#id4<br>class change</div>
</div>

<p id="output"></p>

<script>
var SPAN_S = "<span class='color1'>";
var SPAN_E = "</span>";
var BR = "<br>";

function outsub(msg, val1, val2) {
  var out = msg + " ： " + val1 + " / " + val2;
  if (val1 !== val2) {
    out = SPAN_S + out + SPAN_E;
  }
  $("#output").append(BR + out);
}

function output(idA, idB) {
  $("#output").append(BR + "id = " + idA + " / " + idB);
  outsub("height()", $(idA).height(), $(idB).height());
  outsub("width()", $(idA).width(), $(idB).width());
  outsub("innerHeight()", $(idA).innerHeight(), $(idB).innerHeight());
  outsub("innerWidth()", $(idA).innerWidth(), $(idB).innerWidth());
  outsub("outerHeight()", $(idA).outerHeight(), $(idB).outerHeight());
  outsub("outerHeight(true)", $(idA).outerHeight(true), $(idB).outerHeight(true));
  outsub("outerWidth()", $(idA).outerWidth(), $(idB).outerWidth());
  outsub("outerWidth(true)", $(idA).outerWidth(true), $(idB).outerWidth(true));
  $("#output").append(BR);
}

function funcChange(index, height) {
  var newHeight = height - (index + 1) * 20;
  $("#output").append(BR + SPAN_S + "function [" + index + "] " + height + " -> " + newHeight + SPAN_E);
  return newHeight;
}

$("#output").append(SPAN_S + '$("#id2").outerHeight(123)' + SPAN_E);
$("#id2").outerHeight(123);
output("#id1", "#id2");

$(".change").outerHeight(funcChange);
output("#id3", "#id4");
</script>

#id1
#id2
#id3
class change
#id4
class change