【JavaScript】要素の幅を取得する方法｜offsetWidth・clientWidth・getBoundingClientRectの違い

この記事で学べること

• offsetWidth / clientWidth / getBoundingClientRect / getComputedStyle の違い
• 各メソッドが含む範囲（content・padding・border・scrollbar）
• CSS transform 反映の有無と小数点精度の差
• ウィンドウ幅・ビューポート幅の取得方法
• ResizeObserver による要素サイズ監視
• display:none や box-sizing で起きるミスと対策

要素の幅に関するCSSボックスモデルの構成は、外側から margin > border > padding > content の順です。どの方法がどこまで含むかを理解することが、正しく幅を取得するカギです。

|<------------ offsetWidth ----------->|
|  border | padding | content | padding | scrollbar | border |
|         |<--- clientWidth -->|         |           |        |

<div id="box" style="width:200px; padding:20px; border:5px solid #333;">
  コンテンツ
</div>

const box = document.getElementById('box');

console.log(box.offsetWidth);
// content(200) + padding(20*2) + border(5*2) = 250

250

// box-sizing: border-box の場合
// width:200px に padding と border が含まれる
const box = document.getElementById('box');
console.log(box.offsetWidth); // 200

ポイント

offsetWidth はbox-sizing に関係なく、要素が画面上で占める実際のピクセル幅を返します。content-box でも border-box でも、目に見える全幅が得られます。

|  border | padding | content | padding | scrollbar | border |
|         |<----- clientWidth ---->|         |           |        |

clientWidth = content + padding（左右）
※ border、scrollbar は含まない

const box = document.getElementById('box');

// width:200px, padding:20px, border:5px の場合
console.log(box.clientWidth);
// content(200) + padding(20*2) = 240

console.log(box.offsetWidth);
// content(200) + padding(20*2) + border(5*2) = 250

clientWidth: 240
offsetWidth: 250

const el = document.getElementById('scrollable');

// width:300px, padding:10px, border:2px, overflow:scroll の場合
console.log('offsetWidth:', el.offsetWidth);
// 300 + 10*2 + 2*2 = 324

console.log('clientWidth:', el.clientWidth);
// 300 + 10*2 - scrollbar(約17px) = 約303

// 差分 = border(左右) + scrollbar
const diff = el.offsetWidth - el.clientWidth;
console.log('差分:', diff); // border(4) + scrollbar(約17) = 約21

注意

スクロールバーの幅はOSやブラウザによって異なります。Windows の Chrome では約17pxですが、macOS ではオーバーレイスクロールバー（幅0px）がデフォルトです。そのため、offsetWidth - clientWidth の結果は環境によって変わります。

const box = document.getElementById('box');
const rect = box.getBoundingClientRect();

console.log('幅:', rect.width);   // 250（小数点あり: 250.5 など）
console.log('高さ:', rect.height); // 要素の高さ
console.log('上:', rect.top);     // ビューポート上端からの距離
console.log('左:', rect.left);    // ビューポート左端からの距離

// 例: width: 33.33% の要素
const el = document.querySelector('.third');

console.log(el.offsetWidth);                          // 333（整数に丸められる）
console.log(el.getBoundingClientRect().width);  // 333.328125（正確な値）

// <div id="scaled" style="width:200px; transform:scale(1.5);">
const el = document.getElementById('scaled');

console.log(el.offsetWidth);                          // 200（transform無視）
console.log(el.getBoundingClientRect().width);  // 300（200 * 1.5）

ポイント

アニメーションや transform: scale() を使っている要素の「画面上の見た目の幅」を正確に取得したい場合は、getBoundingClientRect() を使いましょう。

const box = document.getElementById('box');
const styles = window.getComputedStyle(box);

console.log(styles.width);         // "200px"（文字列）
console.log(styles.paddingLeft);   // "20px"
console.log(styles.borderLeftWidth); // "5px"
console.log(styles.boxSizing);     // "content-box" or "border-box"

// 数値として使いたい場合は parseFloat で変換
const widthNum = parseFloat(styles.width);
console.log(widthNum); // 200

// box-sizing による width の違いを確認
function getActualContentWidth(el) {
  const styles = window.getComputedStyle(el);
  const width = parseFloat(styles.width);

  if (styles.boxSizing === 'border-box') {
    // border-box: width には padding と border が含まれている
    const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
    const borderX = parseFloat(styles.borderLeftWidth) + parseFloat(styles.borderRightWidth);
    return width - paddingX - borderX;
  }

  // content-box: width はそのまま content の幅
  return width;
}

const el = document.getElementById('box');
console.log(getActualContentWidth(el));

注意

getComputedStyle() が返す width は文字列です。計算に使う場合は必ず parseFloat() で数値に変換してください。また、display: none の要素では "auto" が返る場合があります。

使い分けの目安

• 要素の見た目の全幅が欲しい → offsetWidth
• 描画可能な内部領域が欲しい → clientWidth
• 小数精度 + 位置情報が欲しい → getBoundingClientRect()
• CSSの指定値を確認したい → getComputedStyle()

// ウィンドウの外側の幅（ブラウザウィンドウ全体）
console.log(window.outerWidth);

// ウィンドウの内側の幅（スクロールバーを含む）
console.log(window.innerWidth);

// ビューポートの幅（スクロールバーを含まない）
console.log(document.documentElement.clientWidth);

// ページ全体の幅（スクロール可能な領域を含む）
console.log(document.documentElement.scrollWidth);

ポイント

レスポンシブ対応のブレークポイント判定には document.documentElement.clientWidth を使いましょう。CSSの @media クエリと同じ幅を返すため、CSS とJavaScript の判定を一致させることができます。

// 方法1: documentElement.clientWidth を使う
function isMobile() {
  return document.documentElement.clientWidth < 768;
}

// 方法2: matchMedia を使う（推奨）
const mql = window.matchMedia('(max-width: 767px)');

if (mql.matches) {
  console.log('モバイル表示');
}

// 画面幅の変化を監視
mql.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('モバイル幅になりました');
  } else {
    console.log('デスクトップ幅になりました');
  }
});

レスポンシブ判定には window.matchMedia() が推奨されます。CSSメディアクエリと完全に同じ条件で判定でき、change イベントでブレークポイントの切り替わりを効率的に監視できます。

const box = document.getElementById('box');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // contentRect: padding を除いたコンテンツ領域
    console.log('contentRect.width:', entry.contentRect.width);

    // borderBoxSize: border + padding + content（推奨）
    if (entry.borderBoxSize) {
      const bbs = entry.borderBoxSize[0];
      console.log('borderBoxSize.inlineSize:', bbs.inlineSize);
    }
  }
});

// 監視開始
observer.observe(box);

// 監視停止（不要になったら）
// observer.unobserve(box);
// observer.disconnect();

// 方法1: ページのスクロールバー幅
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
console.log('スクロールバー幅:', scrollbarWidth, 'px');

// 方法2: 要素を使って正確に測定
function getScrollbarWidth() {
  const outer = document.createElement('div');
  outer.style.cssText = 'overflow:scroll;width:100px;height:100px;position:absolute;top:-9999px;';
  document.body.appendChild(outer);

  const width = outer.offsetWidth - outer.clientWidth;
  document.body.removeChild(outer);

  return width;
}

console.log(getScrollbarWidth()); // Windows: 17, macOS: 0（通常）

// display:none の要素
const hidden = document.getElementById('hidden-box');
hidden.style.display = 'none';

console.log(hidden.offsetWidth);  // 0
console.log(hidden.clientWidth);  // 0

// 解決策1: visibility:hidden を使う（レイアウト上のスペースは確保される）
hidden.style.display = '';
hidden.style.visibility = 'hidden';
console.log(hidden.offsetWidth);  // 正しい値が取得できる

// 解決策2: 一時的に表示して測定
function getHiddenElementWidth(el) {
  const originalStyles = {
    display: el.style.display,
    visibility: el.style.visibility,
    position: el.style.position
  };

  el.style.display = 'block';
  el.style.visibility = 'hidden';
  el.style.position = 'absolute';

  const width = el.offsetWidth;

  el.style.display = originalStyles.display;
  el.style.visibility = originalStyles.visibility;
  el.style.position = originalStyles.position;

  return width;
}

// <head> 内で実行するとエラー
const box = document.getElementById('box');
console.log(box.offsetWidth); // TypeError: Cannot read properties of null

// 方法1: DOMContentLoaded を使う
document.addEventListener('DOMContentLoaded', () => {
  const box = document.getElementById('box');
  console.log(box.offsetWidth); // 正しく取得できる
});

// 方法2: <body> の末尾に <script> を配置
// 方法3: defer 属性を使う
// <script src="app.js" defer></script>

注意

DOMContentLoaded はDOMツリーの構築完了を待ちますが、画像やiframe の読み込みは待ちません。画像サイズに依存するレイアウトの幅を取得する場合は、window.addEventListener('load', ...) を使うか、対象の画像に width / height 属性を明示してください。

// よくある間違い: box-sizing を考慮していない
function getTotalWidth(el) {
  const styles = window.getComputedStyle(el);
  const width = parseFloat(styles.width);
  const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
  const borderX = parseFloat(styles.borderLeftWidth) + parseFloat(styles.borderRightWidth);

  if (styles.boxSizing === 'border-box') {
    // width に padding + border が含まれているので足さない
    return width;
  }

  // content-box: width + padding + border
  return width + paddingX + borderX;
}

ポイント

box-sizing の影響を受けずに要素の全幅を取得したいなら、offsetWidth か getBoundingClientRect().width を使うのが最もシンプルです。getComputedStyle() は CSS の指定値を細かく調べたい場合にだけ使いましょう。

// <span id="label">テキスト</span>
const label = document.getElementById('label');

console.log(label.offsetWidth); // 0（インライン要素）

// getBoundingClientRect() ならインライン要素でも取得可能
console.log(label.getBoundingClientRect().width); // テキストの幅

// または display を変更する
label.style.display = 'inline-block';
console.log(label.offsetWidth); // テキストの幅が取得できる

この記事のまとめ

• offsetWidth = content + padding + border + scrollbar（整数、transform 無視）
• clientWidth = content + padding（整数、border とスクロールバーを除外）
• getBoundingClientRect().width = content + padding + border（小数、transform 反映）
• getComputedStyle().width = CSS計算値（文字列、box-sizing に依存）
• display:none の要素は幅 0 になる（visibility:hidden で回避）
• ResizeObserver で要素サイズの変化をリアルタイム監視できる
• レスポンシブ判定には matchMedia() が最も信頼性が高い