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

しゅーた(@chibasyuta)です!
この記事では「element.getBoundingClientRect().width」の使い方の解説をします!
「element.getBoundingClientRect().width」を使うと、要素の幅を取得することが可能です。様々な場面で使われることが想定されます。
この記事の内容!
- 「element.getBoundingClientRect().width」を使うと何ができるのか?
- 「element.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」は「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);
});
このように、要素の幅を取得して、それを表示したり、それによって計算をしたりと、多種多様な使い方が想定できます。
実用例!
カルーセルでスライドする幅をスライド1枚分の幅に正確に設定したい場合に、「getBoundingClientRect().width」が役立ちます。
特にスライドの幅が % で指定されている場合、画面サイズを変更するとズレが生じてしまう問題が発生します。これを解決する場面で正確な幅を取得する必要があるので「element.getBoundingClientRect().width」が使える、ということですね。
カルーセルの作り方に関しては、また別の記事で解説するのでそちらをお待ちください!
注意点!


参考リンク!
仕様書。
https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect
MDN。
https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect
おすすめの再生リスト!
こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。
「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。
こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください!一緒に楽しく学習しましょう!!
まとめ!
「element.getBoundingClientRect().width」を使うと、要素の幅を正確に取得することができます!
- 返り値は小数点以下も含まれる精度
- 幅にパディング、ボーダー、スクロールバーも含まれる
特徴!
- transform や scale の影響も反映
- なので見かけ上の幅変更も考慮される(offsetWidth との違い)
- 頻繁に呼び出すとパフォーマンスに影響
- リサイズイベントなどでは「debounce」の活用も検討
「element.offsetWidth」との違い!
- transform や scale の影響も反映
- なので見かけ上の幅変更も考慮される(offsetWidth との違い)
- 小数点以下を「element.offsetWidth」は四捨五入されるが、「getBoundingClientRect().width」はそのまま取得

それではこんな感じでこの記事を終わります!
またね!