JavaScript（offset、scroll、client）

在<style></style>标签中设置的样式属性  无法通过 style  获取,   是通过offset系列

 offset：获取当前元素的宽高

offsetWidth             获取元素的宽  （包括padding 、border）

offsetHeight:         获取元素的高  （包括padding 、border）

offsetTop                 获取当前元素距离页面顶部距离

offsetLeft:               获取当前元素距离页面左端距离

 

offsetX        相对于整个页面的横坐标

offsetY        相对于整个页面的纵坐标
 

scroll:获取滚动条的滚动事件 以及卷曲:

scrollWidth ：       元素中内容的实际宽 （+padding）

scrollHeight：       元素中内容的实际高 （+padding）

scrollTop  ：         向上 卷曲出去的值

scrollLeft：           向 左卷曲出去的值

 

scrollTop    ==  pageYOffset（ window对象）

scrollLeft    = =pageXOffset （ window对象）

 

注意： 滚动事件（onscroll）有三个对象， 分别是window  ，html  ，body            

       浏览器的滚动事件        window.pageYOffset                IE8不支持

       页面的滚动事件           document.documentElement.scrollTop     

       body的滚动事件        doucment.body .scrollTop

                                   

鼠标滚轮事件  window.onmousewheel  

 

client：获取可视区宽高

clientWidth：可视区的宽度

clientHeight：可视区的高度

clientLeft：鼠标距离左边的值

clienTop：鼠标上边框的值

 

clientX 可视区域的横坐标         

clientY 可视区域的纵坐标

 

鼠标移动事件（ document.onmousemove）

 

鼠标距离页面顶部的距离        pageX  =scrollLeft   +  clientX        

鼠标距离页面左端的距离        pageY =  scrollTop  +  clientY

 

鼠标在屏幕上的横坐标    screenX    最大值不会超过屏幕分辨率。

鼠标在屏幕上的纵坐标    screenY
 

 

注意：元素的margin-left /margin-top会影响鼠标所在的位置，要加减margin的值

       （e 谷歌，火狐支持 ，IE8支持window.event）