[jQuery] outerHeight - CSS

<style>
#rect0{
  margin:10px;
  width:100px;
  height:100px;
  display:block;
  padding:8px;
  background-color:#aaa;
}
</style>

$('#btn0').click(function(){
  $('#input0').val( 'document outerHeight : ' + $(document).outerHeight() + 'px' );
  $('#input1').val( 'window outerHeight : ' + $(window).outerHeight() + 'px' );
  $('#input2').val( 'div outerHeight : ' + $('#rect0').outerHeight() + 'px' );
  $('#input3').val( 'p outerHeight : ' + $('#rect0 p').outerHeight() + 'px' );
});

.outerHeight() return number
指定した要素の外部高さを取得する

id = rect0

外部高さを取得する

<style>
#rect1{
  margin:10px;
  width:100px;
  height:100px;
  display:block;
  padding:8px;
  background-color:#aaa;
}
</style>

$('#btn1').click(function(){
  $('#input4').val( 'div outerHeight : ' + $('#rect1').outerHeight(true) + 'px' );
});

.outerHeight( isMargin:boolean ) return number
指定した要素の外部高さ(marginを含むかどうかを指定)を取得する

id = rect1

外部高さを取得する