JavaScript での要素サイズ取得方法とスクロール可能な要素での注意点

サイズを取得する時に考慮すべき箇所は以下の通りになります。スクロール可能な要素にはスクロールバーが表示されますが、表示箇所は padding に重なる形になります。

また、デフォルトだとブラウザごとに width / height を取得する時の値が異なるので、box-sizing: border-box を指定していることを前提とします。

border-box は、 padding と border-width を要素内に収めます。

jQuery を使用する場合

メソッド 取得対象
width() CSSで指定した要素の width – padding-right – padding-left – 左右の border-width
height() CSSで指定した要素の height – padding-top – padding-bottom – 上下の border-width
innerWidth() width() + padding-right + padding-left
innerHeight() width() + padding-top + padding-bottom
outerWidth() innerWidth() + 左右の border-width
outerHeight() innerHeight() + 上下の border-width
outerWidth(true) outerWidth() + margin-right + margin-left
outerHeight(true) outerHeight() + margin-top + margin-bottom

要素内がスクロール可能になっている場合

スクロール領域を含めた width / height を取得するにはネイティブの scrollWidth / scrollHeight プロパティを使用します。基本的には、「スクロール領域の要素 + padding」の値となるのですが、注意点としてスクロール領域内だと padding-right が効かなくなることと、 ブラウザによって padding-bottom が多少削られてしまうことです。しかも削られる値もブラウザごとに異なるので、scrollHeight の値はブラウザによって取得する値が異なってきます。プログラムで実装するときには注意しましょう。

プロパティ 取得対象
scrollWidth スクロール内の要素のwidth + padding-left
scrollHeight スクロール内の要素のheight + padding-top + padding-bottom – padding-bottomの削られる値

サンプルコードを載せておきます。異なるブラウザで実行してみてください。scrollHeight の値だけ違うはずです。