Javascript中的offsetHeight、clientHeight、scrollTop 、clientTop的区别

刚刚接触Javascript的时候就会被offsetHeight、clientHeight、scrollTop 、clientTop等属性弄晕，都不知道谁是谁呢？而且好友offsetWidth、clientWidth、scrollLeft 、clientLeft什么的，在这里我就用图把他们解释下，你可要慢慢看哦，我只讲offsetHeight、clientHeight、scrollTop 、clientTop了，至于offsetWidth、clientWidth、scrollLeft 、clientLeft等你只要理解offsetHeight、clientHeight、scrollTop 、clientTop之后就自然会举一反三了，不是么？你只要把我者长图横着看就理解了，好了不多说了，先上图

图中的“BODY高度”就是通俗点说就是你整个页面大高度，我们一般这样来获取var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ;
图中的“用户可视区”就是用户能看到的那部分，当然你的页面也是只有一屏的话可能就跟上面的BODY高度是一样的，我们一般这样获取：var clientTop = document.documentElement.clientHeight ;
图中的“DIV的可视高度”就是用户能看到DIV的那部分，我们一般这样获取：var oDiv = document.getElementsByTagName(“div”)[0];var offsetHeight = oDiv.offsetHeight ;
图中的“DIY的TOP”就是用户能看到DIV到页面的距离，我们一般这样获取：var oDiv = document.getElementsByTagName(“div”)[0];var top= oDiv.style.top;