jQueryオブジェクトが持つDOM要素の最初のDOM要素の高さを返す。
引数なしの場合、paddingとborderを含みmarginは含まれない。
サンプル
Javascript
var str = 'window : ' + $(window).innerHeight() + '/' + $(window).outerHeight() + '<br />';
str += 'document : ' + $(document).innerHeight() + '/' + $(document).outerHeight() + '<br />';
str += 'jqTest : ' + $('.jqTest').innerHeight() + '/' + $('.jqTest').outerHeight() + '<br />';
str += 'No Element : ' + $('.NoElement').innerHeight() + '/' + $('.NoElement').outerHeight();
$('.jqTest .screen').append(str);
$('.jqTest .targetBox').css({
padding: 20,
margin: 20,
border: '20px solid #990000',
background: '#CCCCCC'
}).click(function(){
alert('[outerHeight]' + $(this).outerHeight() + '[innerHeight]' + $(this).innerHeight() + '[height]' + $(this).height());
});
HTML
<div class="jqTest">
<div class="screen"></div>
<hr />
<div class="targetBox">
ここの<br />
高さは?
</div>
</div>
.outerHeight( [includeMargin] )
引数
- (boolean)includeMargin
- デフォルトはfalse。trueでmarginも含めた高さを算出する
サンプル
Javascript
var str = 'window : ' + $(window).innerHeight() + '/' + $(window).outerHeight(true) + '<br />';
str += 'document : ' + $(document).innerHeight() + '/' + $(document).outerHeight(true) + '<br />';
str += 'jqTest : ' + $('.jqTest').innerHeight() + '/' + $('.jqTest').outerHeight(true) + '<br />';
str += 'No Element : ' + $('.NoElement').innerHeight() + '/' + $('.NoElement').outerHeight(true);
$('.jqTest2 .screen').append(str);
$('.jqTest2 .targetBox').css({
padding: 20,
margin: 20,
border: '20px solid #990000',
background: '#CCCCCC'
}).click(function(){
alert('[outerHeight]' + $(this).outerHeight(true) + '[innerHeight]' + $(this).innerHeight() + '[height]' + $(this).height());
});
HTML
<div class="jqTest2">
<div class="screen"></div>
<hr />
<div class="targetBox">
ここの<br />
高さは?
</div>
</div>