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