JS宽高理解

1.clentWidth和clientHeight

   ①加入无padding、无滚动条显示占据位置

　clientWidth=style.width

  ②假如有padding、无滚动

   clientWidth=style.width+2*style.padding

  ③假如有padding、有滚动

   clientWidth=style.width+2*style.padding-滚动条宽度

   clientHeight同理

2.clientLeft和clientTop

   这一对属性用来读取元素的border的宽度和高度

   clientLeft = border-left的border-width

   clientTop = border-top的border-width

3.offsetWidth和offsetHeight

   这一对属性指的是元素的border+padding+content的宽度和高度

   ①假如无padding、无滚动、无border

　　offsetWidth=clientWithd=style.width

   ②假如有padding、无滚动、有border

       offsetWidth=style.width+2*style.padding+2*style.border-width=clientWidth+border-width*2

  ③假如有padding、有滚动，且滚动是显示的，有border

     offsetWidth=style.width+2*style.padding+2*style.border-width=clientWidth+滚动轴宽度+border-width*2

4.offsetLeft和offsetTop

   依据offsetParent

   ①如果当前元素的父级元素没有进行CSS定位（position），offsetParent为body

   ②如果当前元素的父级元素有CSS定位（position），offsetParent取最近的那个父级元素

   在IE8/9/10及Chrome中：

   　　offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+（offsetParent的padding-left）+（当前元素的margin-left）

   在FireFox中

　　  offsetLeft=（offsetParent的margin-left）+（offsetParent的padding-left）+（当前元素的margin-left）

5.Event对象的五种坐标

   ①clientX和clientY 相对于浏览器（可视区左上角0,0，不包含浏览器头）的坐标

   ②screenX和screenY 相对于设备屏幕左上角（0,0）的坐标

   ③offsetX和offsetY 相对于事件源左上角（0,0）的坐标

   ④pageX和pageY 相对于整个网页左上角（0,0）的坐标，在无滚动轴的情况下与clientX、clientY相等，有滚动轴的情况下，pageY包含滚动区那些部分的高度

   ⑤X和Y 本来是IE属性，相对于用CSS动态定位的最内层包容元素

　　　　在IE浏览器中，事件源无定位的情况下X、Y等于clientX、clientY，有定位的情况下等于offsetX和offsetY

              在chrome中，事件源有无定位，都等于clientX、clientY

 

转载于:https://www.cnblogs.com/BlogRegisterboby/p/10284164.html