此文根据张鑫旭老师的博文（传送门）整理而得，仅供个人学习使用。
元素视图属性
关于元素大小位置等信息的一些属性。有：
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight
1. clientLeft和clientTop
表示内容区域(包括padding)的左上角相对于整个元素左上角的位置（包括边框）。
2. clientWidth和clientHeight
表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
3. offsetLeft和offsetTop
表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
4. offsetParent
第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）
offsetParent元素只可能是下面这几种情况：
1.<body>
2.position不是static的元素
3.<table>, <th> 或<td>，但必须要position:static。
5. offsetWidth和offsetHeight
整个元素的尺寸（包括边框）
6. scrollLeft和scrollTop
表示元素滚动的像素大小（有滚动条此属性才有作用）
7. scrollWidth和scrollHeight
表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop +clientHeight。
鼠标位置(Mouse position)
与鼠标事件（例如普通的单击）相关的些属性。这个东西基本上JavaScript一些必修书籍（例如《JavaScript高级程序设计》）上都有介绍。这里我就简单展示下兼容性和一些必要的文字介绍。
相关的些属性有：
clientX,clientY
offsetX, offsetY
pageX, pageY
screenX, screenY
x, y
1.clientX,clientY
相对于window，为鼠标相对于window的偏移。在iphone上，这对值返回的位置就等同于下面要提到的pageX/Y。
2. offsetX, offsetY
表示鼠标相对于当前被点击元素padding box的左上偏移值，各个浏览器的兼容性五花八门（因张鑫旭老师写博文时间有点久远，兼容性问题待定，博主暂时查询不到）。
3. pageX, pageY
为鼠标相对于document的坐标。IE6~IE8浏览器是不支持的
4. screenX, screenY
鼠标相对于显示器屏幕的偏移坐标。
5. x, y
相当于clientX/clientY。既然已经有了clientX/clientY，为什么还需要x, y呢？莫非是为了少写几个字母？谁知道呢
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
