ただいま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での取得の有無

clientWidth,clientHeightと比べてわかりやすい違いとしては、borderとscrollについてです。

offsetWidth,offsetHeightは「box-sizing:border-box」を指定して要素内にborderを含めてしまう場合や、要素内にスクロールバーが表示されている場合でも、そのサイズの数値がマイナスされるわけではないようです。

なるほど！！