HOME > > > > >

.outerHeight()

.outerHeight()

戻り値

Integer
数値

jQueryオブジェクトが持つDOM要素の最初のDOM要素の高さを返す。

引数なしの場合、paddingとborderを含みmarginは含まれない。

サンプル

実行結果


ここの
高さは?

Javascript

  1. var str = 'window : ' + $(window).innerHeight() + '/' + $(window).outerHeight() + '<br />';
  2. str += 'document : ' + $(document).innerHeight() + '/' + $(document).outerHeight() + '<br />';
  3. str += 'jqTest : ' + $('.jqTest').innerHeight() + '/' + $('.jqTest').outerHeight() + '<br />';
  4. str += 'No Element : ' + $('.NoElement').innerHeight() + '/' + $('.NoElement').outerHeight();
  5. $('.jqTest .screen').append(str);
  6.  
  7. $('.jqTest .targetBox').css({
  8.     padding: 20,
  9.     margin: 20,
  10.     border: '20px solid #990000',
  11.     background: '#CCCCCC'
  12. }).click(function(){
  13.     alert('[outerHeight]' + $(this).outerHeight() + '[innerHeight]' + $(this).innerHeight() + '[height]' + $(this).height());
  14. });

HTML

  1. <div class="jqTest">
  2.     <div class="screen"></div>
  3.     <hr />
  4.     <div class="targetBox">
  5.     ここの<br />
  6.     高さは?
  7.     </div>
  8. </div>

.outerHeight( [includeMargin] )

引数

(boolean)includeMargin
デフォルトはfalse。trueでmarginも含めた高さを算出する

サンプル

実行結果


ここの
高さは?

Javascript

  1. var str = 'window : ' + $(window).innerHeight() + '/' + $(window).outerHeight(true) + '<br />';
  2. str += 'document : ' + $(document).innerHeight() + '/' + $(document).outerHeight(true) + '<br />';
  3. str += 'jqTest : ' + $('.jqTest').innerHeight() + '/' + $('.jqTest').outerHeight(true) + '<br />';
  4. str += 'No Element : ' + $('.NoElement').innerHeight() + '/' + $('.NoElement').outerHeight(true);
  5. $('.jqTest2 .screen').append(str);
  6.  
  7. $('.jqTest2 .targetBox').css({
  8.     padding: 20,
  9.     margin: 20,
  10.     border: '20px solid #990000',
  11.     background: '#CCCCCC'
  12. }).click(function(){
  13.     alert('[outerHeight]' + $(this).outerHeight(true) + '[innerHeight]' + $(this).innerHeight() + '[height]' + $(this).height());
  14. });

HTML

  1. <div class="jqTest2">
  2.     <div class="screen"></div>
  3.     <hr />
  4.     <div class="targetBox">
  5.     ここの<br />
  6.     高さは?
  7.     </div>
  8. </div>