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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值