HTML元素位置

1、offsetParent、offsetLeft、offsetTop、offsetWidth、offsetHeight

offsetParent — 元素的第一级拥有定位属性(static/absolute/relative/fixed)的父元素。

offsetLeft / offsetTop — 元素boder外侧，到其offsetParent的border内侧的偏移量（offsetLeft为横向偏移量；offsetTop为纵向偏移量）。

offsetWidth / offsetHeight — 元素的宽度和高度（包括边宽border-width、内边距padding）（offsetWidth为宽度；offsetHeight为高度）

2、clientHeight、clientWidth
clientHeight / clientWidth — 元素的宽度和高度（包括内边距padding）（clientWidth为宽度；clientHeight为高度）
注：clientHeight与offsetHeight的区别是：clientHeight不包括边宽 

 

3、scrollHeight、scrollWidth、scrollTop、scrollLeft

scrollHeight — 滚动元素内部内容的高度（包括外边距margin、边宽border-width、内边距padding；IE8只包括margin-top，不包括margin-bottom）。比如有如下的代码，则scrollDiv的scrollHeight = contentDiv的高度1000 + 边宽3*2 + 外边距3*2 + 内边距1*2 = 1000 + 6 + 6 + 2 = 1014：

          <div style="width:100px;height:100px;overflow:scroll;border:2px solid red;" id="scrollDiv">
             <div id="contentDiv" style="width:10px;height:1000px;border:3px solid blue;margin:3px; padding:1px"></div>
          </div>

scrollWidth —— 滚动元素内部内容的宽度（包括外边距margin、边宽border-width、内边距padding；IE8只包括margin-top，不包括margin-bottom）。和scrollHeight类似
scrollTop —— 滚动元素内部内容被滚动到上边框以外不可见区域的内容高度。
scrollLeft —— 滚动元素内部内容被滚动到左边框以外不可见区域的内容宽度。