BOM offset client scroll

0.大意：

client——客户端可见范围

scroll——可滚动范围

offset ——偏差。

 

1.getBoundingClientRect: DOMRect 

top: 元素顶边距离视口顶边的距离。

left: 元素左边距离视口左边的距离。

right: 元素右边距离视口右边的距离。

left: 元素下边距离视口下边的距离。

 

2.clientWidth、clientHeight、clientLeft和clientTop

clientWidth是指可视区的宽度。(包括width,padding，不包括边框 border,margin 和垂直滚动条)

clientHeight是指可视区的高度。

clientLeft获取左边框的宽度。——返回的是元素周围边框的厚度

clientTop获取上边框的宽度。

 

3.offsetWidth、offsetHeight、offsetLeft和offsetTop

offsetWidth是指元素的宽度（包括width,padding,border）——不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。

offsetHeight是指元素的高度（包括边框）

offsetLeft是指元素到offsetParent（一般为body）左边框的距离（不包括边框）——相对于父元素。(当前元素左上角相对于  HTMLElement.offsetParent 节点的左边界偏移值。)

offsetTop是指元素到offsetParent（一般为body）上边框的距离（不包括边框）（当前元素相对于其 offsetParent 元素的顶部内边距的距离。）

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。

4.scrollTop、scrollLeft、scrollWidth和scrollHeight

scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。——是“卷”起来的高度值。

兼容获取：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。

scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个的宽度（包括边框）

scrollHeight是指上边看不到的区域加可视区加下边看不到的区域即整个的高度（包括边框）

 

1.鼠标的clientX与clientY

event.clientX——是指鼠标到可视区左边框的距离。

event.clientY——鼠标到可视区上边框的距离。

 

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

 

event.pageX、event.pageY 

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。