一張圖搞懂clientWidth,offsetWidth,scrollHeight

因爲前端常常會遇到計算位置的問題，那麼搞懂clientWidth,offsetWidth,scrollHeight等等這些就變得尤其重要。放上經典圖，一張圖讓你搞懂clientWidth,offsetWidth,scrollHeight~~~

除了這些還有clientX,pageX,screenX等等，再來看下下面的圖

下面介紹一下每一個字段的含義

• clientLeft,clientTop
  表示內容區域的左上角相對於整個元素左上角的位置（包括邊框）。(取決於邊框的像數值？)
• clientWidth,clientHeight
  內容區域的寬高，不包括邊框寬度值。
• clientX、clientY
  點擊位置距離當前body可視區域的x，y座標
• offsetLeft,offsetTop
  相對於最近的祖先定位元素。
• offsetParent
  某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 獲得body...
• offsetWidth,offsetHeight
  整個元素的尺寸(不包括由於滾動條變寬的寬度，包括滾動條的寬度和高度)
• offsetX, offsetY
  相對於帶有定位的父盒子的x，y座標
• scrollLeft,scrollTop
  元素滾動的距離大小
• scrollWidth,scrollHeight
  整個內容區域的寬度(包括需拉動滾動條隱藏起來的那些部分) scrollWidth = scrollTop+clientWidth
• pageX、pageY
  對於整個頁面來講，包括了被捲去的body部分的長度
• screenX、screenY
  點擊位置距離當前電腦屏幕的x，y座標
• x、y和screenX、screenY同樣