jquery outerHeightメソッド

jquery outerHeight()メソッド

outerHeightメソッドは、指定した要素の外側の高さを取得するメソッドです
borderの太さを含みます、paddingも含みます
引数に何も指定しないとmarginを含まない要素の高さを取得します
引数にtrueを指定するとmarginも含めた高さを取得できます
取得する単位はpxです

枠線を含めた外側の高さの値を取得する

$("セレクタ").outerHeight()

枠線とmarginを含めた外側の高さの値を取得する

$("セレクタ").outerHeight(true)

指定したHTML要素の内側の高さの値を取得します

指定した要素をクリックしたときに、クリックした要素の枠線を含む外側の高さを取得します

jquery

$(function() {
	$("#foo,#foo2,#foo3").click(function(){
	var hoge = $(this).outerHeight();
	$(this).text("outerHeightの値は"+ hoge);
	});
});

div#hoge p {
 cursor: pointer;
 background-color: #F90;
}

p#foo{
  height: 50px;
  padding-top: 5px;
 }
p#foo2{
  height: 50px;
  border: 3px solid;
 }
p#foo3{
  height: 50px;
  border: 3px solid;
  padding-top: 5px;
  margin-top: 5px;
 }

html

<div id="hoge">
<p id="foo">p要素</p>
<p id="foo2">p要素</p>
<p id="foo3">p要素</p>
</div>

サンプル