HTML Element の幅と高さ、座標。

幅と高さ

Determining the dimensions of elements | MDN

• HTMLElement.offsetWidth
  • content + padding + boarder + scrollbar
• Element.clientWidth
  • content + padding
• Element.scrollWidth
  • element のコンテンツの幅か、element 自身の幅（clientWidth）のうち大きい方を返す

補足

https://www.w3.org/TR/CSS22/box.html#box-dimensions

座標

• HTMLElement.offsetTop

  • offsetParent からの距離

• Element.getBoundingClientRect()

  • viewport (window) からの座標を返す

• Element.scrollTop

  • element のコンテンツがどのくらいスクロールされたか

補足

• offsetParent

  The offsetParent property returns the nearest ancestor that has a position other than static. http://www.w3schools.com/jsref/prop_element_offsetparent.asp

• ドキュメントからの座標

// https://github.com/oneuijs/You-Dont-Need-jQuery

function getOffset (el) {
  const box = el.getBoundingClientRect();
  
  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  };
}

参考

• Web APIs | MDN