【jQuery】指定した要素の幅・高さを取得する完全ガイド｜width/height・innerWidth・outerWidth・getBoundingClientRect比較まで

jQueryで要素のサイズを取得する際、width()・innerWidth()・outerWidth()の違いや、画面スクロール後の正確な位置取得など、混乱しがちなポイントが多くあります。この記事では各メソッドの違い・実用的なサイズ取得パターン・レスポンシブ対応・getBoundingClientRectとの比較まで解説します。

width・innerWidth・outerWidth の違い

同様に高さは height()・innerHeight()・outerHeight() があります。

基本的なサイズ取得

$(function () {
  var $box = $('#target-box');

  console.log('width:      ', $box.width());          // コンテンツ幅
  console.log('innerWidth: ', $box.innerWidth());     // + padding
  console.log('outerWidth: ', $box.outerWidth());     // + padding + border
  console.log('outerWidth(margin):', $box.outerWidth(true)); // + margin も含む

  console.log('height:      ', $box.height());
  console.log('innerHeight: ', $box.innerHeight());
  console.log('outerHeight: ', $box.outerHeight());
});

ウィンドウ・ドキュメント全体のサイズを取得する

$(function () {
  // ブラウザのビューポート（見えている領域）
  var vw = $(window).width();
  var vh = $(window).height();
  console.log('ビューポート:', vw, 'x', vh);

  // ドキュメント全体（スクロール可能な全領域）
  var dw = $(document).width();
  var dh = $(document).height();
  console.log('ドキュメント全体:', dw, 'x', dh);

  // スクロール位置
  var scrollTop = $(window).scrollTop();
  console.log('スクロール位置:', scrollTop);
});

リサイズ時にサイズを再取得する（debounce対応）

ウィンドウサイズ変更時にレイアウトを調整するパターンです。resize イベントは高頻度で発火するため debounce で間引きを行います。

function debounce(fn, delay) {
  var timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

$(function () {
  function onResize() {
    var w = $(window).width();
    var h = $(window).height();
    console.log('リサイズ後のサイズ:', w, 'x', h);

    // 例: ウィンドウ幅に応じて要素の高さを調整
    if (w < 768) {
      $('#sidebar').height('auto');
    } else {
      $('#sidebar').height($('#main').outerHeight());
    }
  }

  $(window).on('resize', debounce(onResize, 200));
  onResize(); // 初回実行
});

非表示要素のサイズを取得する

display:none の要素は width() が 0 を返します。一時的に可視化してサイズを取得する方法です。

$(function () {
  function getHiddenSize($el) {
    // 見えない形で一時的に可視化
    var $clone = $el.clone().css({
      visibility: 'hidden',
      display:    'block',
      position:   'absolute',
      top:        '-9999px'
    }).appendTo('body');

    var size = {
      width:  $clone.outerWidth(),
      height: $clone.outerHeight()
    };
    $clone.remove();
    return size;
  }

  var size = getHiddenSize($('#hidden-panel'));
  console.log('非表示要素のサイズ:', size.width, 'x', size.height);
});

getBoundingClientRect() との使い分け

$(function () {
  var el   = document.getElementById('target-box');
  var rect = el.getBoundingClientRect();

  console.log('幅(含border):', rect.width);
  console.log('高さ(含border):', rect.height);
  console.log('ビューポート上端からの距離:', rect.top);
  console.log('ビューポート左端からの距離:', rect.left);
  console.log('右端のx座標:', rect.right);
  console.log('下端のy座標:', rect.bottom);

  // ドキュメント全体での絶対位置
  var scrollTop  = window.pageYOffset || document.documentElement.scrollTop;
  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  var absTop  = rect.top  + scrollTop;
  var absLeft = rect.left + scrollLeft;
  console.log('ドキュメント基準の絶対位置:', absTop, absLeft);
});

まとめ

jQueryで要素のサイズを取得する際のポイントをまとめます。

• width(): コンテンツ幅、innerWidth(): +padding、outerWidth(): +border
• ウィンドウサイズ: $(window).width()（ビューポート）/ $(document).width()（全体）
• リサイズ監視: debounceで間引き（200ms推奨）
• 非表示要素: cloneして一時表示 → サイズ取得 → 削除
• 精密な位置計算: getBoundingClientRect() が高精度

関連記事: ヘッダーの高さを取得してコンテンツ位置を調整する方法 / スムーズスクロール完全ガイド

よくある質問（FAQ）