clientHeight,clientWidth,scrollWidth,scrollHeight,offsetWidth,offsetHeight的说明

     实际上每个前缀cient,scroll,offset都有4个后缀,分别是Width,Height,Left,Top;所以一共有12属性,但是并不是每个属性都有意义,比如offsetHeight,offsetWidth,偏移实际上只有2个偏移量,偏移高度和宽度是什么意思呢?而事实上,这两个属性在不同的浏览器中的值是不一样的。所以过多的定义反倒容易混乱,我们应该记住,HTML是一种非常混乱的语言,因为它本身就是不同厂商拼凑的一个标准,所以不必了解这些标准的全部细节,尽量使用各浏览器中统一的标准,而且应该尽量使用一个精简的子集,奇淫巧计最好不要用。还有,如果一个效果必须在不同浏览器中有不同的实现方法,这种效果不要也罢。


client:代表的是元素的实际大小和位置。

scroll:代表元素的内容大小,当有滚动条时,内容大于实际大小,没有滚动条时,内容小于等于实际大小。

offset:这个指内容偏移量,也就是内容大小的度量下的偏移,和滚动条无关。一般只要使用offsetLeft和offsetTop就够了,不要使用offsetWidth和offsetHeight。


一个空的网页,它仍然有一个顶级元素对象,documentElement,此时它的scrollHeight为0,但是scrollWidth和clientWidth相同。


还需要注意,网页的默认边界在不同浏览器中是不同的,所以一般先加上样式:

	*{margin:0;padding:0;border:0;}

把边界去掉。这样计算起来就不用考虑复杂的边界问题了。

你可能感兴趣的:(clientHeight,clientWidth,scrollWidth,scrollHeight,offsetWidth,offsetHeight的说明)