js中所有关于位置的属性以及api

在写动画效果时，我们常常需要使用到有关位置的属性以及api，接下来做一个总结

window对象

1. window.innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。

   IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。

2. window.innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。

   IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。

   clientHeight与clientWidth属性是只读的。

   另外，IE不支持outerWidth、outerHeight属性。

3. window.pageXOffset属性：整数只读属性，表示文档向右滚动过的像素数。

   IE不支持该属性，使用body元素的scrollLeft属性替代。

4. window.pageYOffset属性：整数只读属性，表示文档向下滚动过的像素数。

   IE不支持该属性，使用body元素的scrollTop属性替代。

DOM对象

1. obj.scrollWidth
   是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
2. obj.clientWidth
   是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
3. obj.offsetWidth
   是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
4. obj.scrollTop:
   对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
   即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
5. obj.offsetTop 指 obj 距离上方或上层控件(父元素)的位置，整型，单位像素。

Event对象

1. e.scrrenX,e.scrent.Y表示鼠标距离屏幕的距离

2. e.clientX,e.clientY表示点击的鼠标位置距离文档可视区域的位置

3. e.offsetX,e.offsetY表示鼠标点击位置距离事件源对象的位置

4. e.pageX,e.pageY表示鼠标点击位置距离文档区的位置

api

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

• 该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

• 这里的top、left和css中的理解很相似，width、height是元素自身的宽高;

• 但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。