ただいまjQueryやReactなどのライブラリを使わずに、JavaScriptでコードを書く勉強をしています。
ところで、JavaScriptで「特定の要素の幅と高さを取得する方法」はいくつかあります。前にその方法の一つとして「clientWidth,clientHeight」について書きました。
今回は「offsetWidth,offsetHeight」について書きました。「clientWidth,clientHeight」の違いも確認することができたので、興味がありましたらご参考ください。
offsetWidth,offsetHeightを使って特定の要素の幅と高さを取得する方法
例えば、div要素の幅と高さをJavaScriptで取得する場合は以下のように書きます。
html
<div id="box">box</div>
CSS
#box{
width: 300px;
height: 250px;
}
JavaScript
let client_w = document.getElementById('box').offsetWidth;
let client_h = document.getElementById('box').offsetHeight;
//「300px 250px」とコンソールに表示されます
console.log(client_w + 'px ' + client_h + 'px');
CSSプロパティを指定した場合の幅と高さの取得について
ここで、要素によく指定するCSSプロパティ（padding,border,scrollなど）を指定した場合に、どのような数値が取得できるのかを以下にまとめました。
offsetWidth,offsetHeightでの取得の有無
| 取得 | |
|---|---|
| padding | ○ |
| border | ○（要素内に表示されていても数値がマイナスされない） |
| scroll | ○（要素内に表示されていても数値がマイナスされない） |
clientWidth,clientHeightと比べてわかりやすい違いとしては、borderとscrollについてです。
offsetWidth,offsetHeightは「box-sizing:border-box」を指定して要素内にborderを含めてしまう場合や、要素内にスクロールバーが表示されている場合でも、そのサイズの数値がマイナスされるわけではないようです。
なるほど！！
このページを共有する