DOM 定位

继承

graph TD
HTMLElement --> Element --> Node --> EventTarget

HTMLElement

• HTMLElement.offsetHeight
  • 元素自身可视高度加上上下border的宽度
• HTMLElement.offsetWidth
  • 元素自身可视宽度加上左右border的宽度
• HTMLElement.offsetLeft
  • 元素自己border左边距离父元素border左边或者body元素border左边的距离
• HTMLElement.offsetTop
  • 元素自己border顶部距离父元素顶部或者body元素border顶部的距离
• HTMLElement.offsetParent
  • 指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body元素

Element

• Element.clientHeight
  • 内部相对于外层元素的高度
• Element.clientWidth
  • 元素内部的宽度
• Element.clientLeft
  • 元素距离它左边界的宽度
• Element.clientTop
  • 元素距离它上边界的高度
• Element.scrollHeight
  • 元素的滚动视图高度
• Element.scrollLeft
  • 元素横向滚动条距离最左的位移
• Element.scrollTop
  • 元素纵向滚动条距离
• Element.getBoundingClientRect()
  • 返回元素的大小及其相对于视口的位置