JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight)

私個人的なことですが、最近はjQueryやReactなどのライブラリを使わずに、JavaScriptでコードを書く勉強をしています。これがまた、ほとんど経験がないので難しい・・・

ところで「JavaScriptで特定の要素の幅や高さを取得して何かをしたい」という場面って結構あります。

特定の要素の幅や高さを取得する方法はいくつかありますが、今回は「clientWidth,clientHeight」を使う方法について書きました。

clientWidth,clientHeightを使って特定の要素の幅と高さを取得する方法

例えば、div要素の幅と高さをJavaScriptで取得する場合は以下のように書きます。

html

<div id="box">box</div>

CSS

#box{
 width: 300px;
 height: 250px;
}

JavaScript

let client_w = document.getElementById('box').clientWidth;
let client_h = document.getElementById('box').clientHeight;

//「300px 250px」とコンソールに表示されます
console.log(client_w + 'px ' + client_h + 'px');

CSSプロパティを指定した場合の幅と高さの取得について

clientWidth,clientHeightは、要素によく指定するCSSプロパティ（padding,border,scrollなど）によって取得される数値がどう変わるのか・・・今後も使いそうなので、以下にサンプルを作ってまとめました。

clientWidth,clientHeightでの取得の有無

「box-sizing:border-box」を指定して要素内にborderを含めてしまう場合は、borderのサイズ分だけ数値がマイナスされる、ということがわかりました。

「scroll」についても要素内にスクロールバーが表示されていれば、そのサイズ分だけ数値がマイナスされました。なるほどです、勉強になりました。

offsetWidth,offsetHeightでも取得できるよ

「特定の要素の幅や高さを取得する方法」の別の方法として「offsetWidth,offsetHeight」を使う方法もあります。

このページに書いた「clientWidth,clientHeight」と比較すると、取得できる数値に違いがあることも理解しました。以下にまとめましたので、機会がありましたらご参考ください。