CSSOM视图模型中几个常用的位置、尺寸相关属性的详解

什么是CSSOM视图模型，这里就不解释了，有兴趣的童鞋可以到官网去看下。这里只说说几个很有用却容易混淆的属性，这几个属性兼容性都蛮不错的，基本不用太关注浏览器环境。

clientLeft 与 clientTop

返回元素内容区域左上边界（包含padding,并且是可见区域）相对于元素整个区域左上边界(包含边框，但不包含margin)的偏移距离，兼容常见浏览器(指ie6+,firefox 3.0+,chrome 4+,opera 10.10+,safari 4.0+等浏览器，后文相同)

ps:可见区域是指我们能看到的部分，即不包括超出隐藏部分或是有滚动条时被隐藏的那部分。

再ps:后文中如再提到元素的内容区域，则指的是包含padding后的区域，元素的整个区域指的是包含padding和border，但不包含margin的区域.

 

offsetLeft 与 offsetTop

返回元素的整个区域的左上边界相对于最近的有动态定位（也就是除static以外的定位）的祖先元素(也称为offsetParent)的内容区域左上边界的偏移距离.

注：在ie6中,当offsetParent元素的position属性为relative时,则offsetLeft和offsetTop的计算点会变为文档的左上角，ie7+待测

另：书上以及很多地方都说，offsetParent的最顶级元素（即页面中不存在有动态定位的祖先元素时，会取这个最顶级元素作为offsetParent）为body,但实际中，offsetParent的最顶级元素应为html，在绝对定位中，最高参照物也是html,而不是body

ps: 在IE和Opera浏览器下，position属性为fixed的元素是没有offsetParent的。

总结：clientLeft 与 clientTop的计算只涉及到一个元素，也就是自身，而offsetLeft 与 offsetTop则需要它父元素中的一个来参与计算，因此涉及到了两个元素。

clientWidth 与 clientHeight

 返回元素内容区域（包含padding,但不包含边框和滚动条，并且是可见区域）的尺寸大小，兼容常见浏览器

ps:有滚动条产生时，元素尺寸不会额外增大，而是从自身的空间里扣除

 

offsetWidth 与 offsetHeight

返回整个元素（包含padding和border）的大小,兼容常见浏览器

总结：由以上几个属性可看出，带client的都是和元素内容区域相关，带offset的都是和元素的整个区域的相关的。

 

scrollLeft 与 scrollTop

返回元素已滚动部分的距离，兼容常见浏览器

 

scrollWidth 与 scrollHeight

返回元素的的clientWidth或clientHeight(包括超出隐藏的或滚动的部分),兼容常见浏览器

注意：clientWidth或clientHeight是不包括超出隐藏或滚动部分的

 

clientX 与 clientY

返回鼠标事件时鼠标相对于浏览器窗口左上角的位置，与html或body的边框、内外边距等无关，兼容常见浏览器