幅や高さのまとめ【JavaScript】

幅とか高さに関するコードなどまとめ

■document.clientWidth, clientHeight

要素のpaddingと内容部分を合わせた幅、高さ（スクロールバーを除く）を取得する。ボーダーやマージンは入りません。html要素の幅、高さ（ブラウザ画面）はもちろん広げたり縮めたりすると変化する。スクロールバーなどが出ると、その幅分は引かれます。

上の図は、最初の図と比べて高さは縮めず、幅だけ縮めてスクロールバーを出したが、rootclientHeightからバーの分、高さから数値が引かれている様子

■window.innerWidth, innerhight

ウィンドウ画面のコンテンツ領域の高さ、幅を取得（スクロールバー含む）

■window.outerWidth, outerhight

ウィンドウ画面のブラウザ全体の幅、高さを取得（ただ正確ではないかも）