javascriptで要素のサイズを取得する offset・ client・ scroll

javascriptでサイズを取得する時に使うoffset・ client・ scrollの違いを今日覚えたのでメモ。

  • 【client】コンテンツ全体のサイズ
Element.clientWidth
Element.clientHight
  • 【offset】内包されたコンテンツのサイズ
Element.offsetWidth
Element.offsetHight
  • 【scroll】表示領域を超えている分までのコンテンツのサイズ値を返す
Element.scrollWidth
Element.scrollHight

(参考記事)What is offsetHeight, clientHeight, scrollHeight?