2025/01/26 (更新日:2025/01/26)

【JavaScript】「getBoundingClientRect().width」の使い方！【要素の幅を取得】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「element.getBoundingClientRect().width」の使い方の解説をします！

「element.getBoundingClientRect().width」を使うと、要素の幅を取得することが可能です。様々な場面で使われることが想定されます。

この記事の内容！

「element.getBoundingClientRect().width」を使うと何ができるのか？
「element.getBoundingClientRect().width」の使い方！
簡単なユースケース

また、下の動画でも「getBoundingClientRect().width」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「element.getBoundingClientRect().width」を使うと何ができるのか？

「element.getBoundingClientRect().width」を使うことで、要素の横幅を取得することができます。

「px」単位で取得することができるのですが、返り値では、単位は省略されます。

また、読み取り専用です。

「element.getBoundingClientRect().width」で取得できるもの

「element.getBoundingClientRect().width」で取得できる値に含まれるものは、下記の通りです。

含まれるもの

コンテンツの幅
パディング (padding)
ボーダー (border)
スクロールバーの幅

これらが含まれます。

「transform」による変化も計算に入れてくれる

「transform」プロパティや、「scale」プロパティによって、要素の横幅を変更することができますよね。

この変更も「element.getBoundingClientRect().width」は計算に含んでくれます。

ここが大きな「element.offsetWidth」との違いになります。

「element.offsetWidth」は「scale」プロパティなどによる「見かけ上の要素の幅の変更」は計算に含んでくれません。

小数点以下も含む

「element.getBoundingClientRect().width」を使うと小数点以下の値も含む正確な幅を取得することができます。

それに対して、「element.offsetWidth」では、小数点以下は四捨五入されます。

「element.getBoundingClientRect().width」の使い方！

<div class="container">
  <div class="box"></div>
  <div class="width">要素の幅！</div>
  <button class="w100">100px</button>
  <button class="w200">200px</button>
  <button class="w300">300px</button>
</nav>

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    width: 800px;
    margin: 70px auto;
    font-size: 40px;
}
.box {
    width: 300px;
    height: 300px;
    background-color: black;
    transition-duration: 0.3s;
    margin-bottom: 10px;
}
.width {
    margin-bottom: 20px;
}
button {
    border: none;
    cursor: pointer;
    padding: 8px;
    font-size: 30px;
}
button:hover {
    background-color: black;
    color: white;
}

"use strict";

const box = document.querySelector('.box');
const width = document.querySelector('.width');
const w100 = document.querySelector('.w100');
const w200 = document.querySelector('.w200');
const w300 = document.querySelector('.w300');

function checkWidth() {
    width.textContent = box.getBoundingClientRect().width;
}

w100.addEventListener('click', () => {
    box.style.width = "100px";
    setTimeout(checkWidth, 400);
});
w200.addEventListener('click', () => {
    box.style.width = "200px";
    setTimeout(checkWidth, 400);
});
w300.addEventListener('click', () => {
    box.style.width = "300px";
    setTimeout(checkWidth, 400);
});

このように、要素の幅を取得して、それを表示したり、それによって計算をしたりと、多種多様な使い方が想定できます。