在做网页的时候,有时候我们需要获取窗口可视范围的高度、文档内容实际高度、窗口滚动条滚动高度等,比如做返回顶部的按钮,就需要获取到当前窗口滚动条滚动高度。下面我们就来讲几个获取这些数据的方法。
JS:
/******************** * 取窗口滚动条滚动高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } alert(scrollTop); } /******************** * 取窗口可视范围的高度 *******************/ function getClientHeight() { var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight) { var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } alert(clientHeight); } /******************** * 取文档内容实际高度 *******************/ function getScrollHeight() { ScrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); alert(ScrollHeight); }
CSS:
#i1{ width: 100%; height: 600px; background: red; } #i2{ width: 100%; height: 600px; background: green; } #i3{ width: 100%; height: 600px; background: blue; }
HTML:
<div id="i1"></div> <button onclick="getScrollTop()">getScrollTop</button> <button onclick="getClientHeight()">getClientHeight</button> <button onclick="getScrollHeight()">getScrollHeight</button> <div id="i2"></div> <div id="i3"></div>
下面是获取屏幕参数的几个方法:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
小义 2014/01/11 15:32
测试评论
Specs 2014/01/11 15:35
@ 我的那个图片还是不能用~~
小义 2014/01/11 15:36
@ 给我开个帐户,能发表文章的。。还有你这个评论有点问题。
Specs 2014/01/11 15:38
@ 我把注册开了 你注册一个号 我给你改权限
simply 2014/01/11 15:40
@ 注册好了
Specs 2014/01/11 15:43
@ 已给权限~
simply 2014/01/11 15:48
@ 你的图片灯箱用的效果不是大发主题的,所以不行。
Specs 2014/01/11 15:50
@ 不是, 我把那个关了也不行, 我现在把那个灯箱插件关了 你再试试
simply 2014/01/11 15:53
@ 你关了,没有灯箱效果了。建议你重新安装下主题吧。
Specs 2014/01/11 15:56
@ 那个版权信息,是直接把代码放到functions.php里面就行吗 single.php用不用改?
simply 2014/01/11 16:50
@ 大发文章中介绍的是说 防止采集加的版权。
Specs 2014/01/11 16:52
@ 我看你那个也有,就是在TAGS下面的,怎么加上的~~
simply 2014/01/11 16:53
@ 这个哦,加代码就行了,在single.php里加。其它这个你在大发主题里扒。
simply 2014/01/11 16:55
@ 加个QQ吧。交个朋友 9-1-6-7-5-4-4-3-8
依依 2014/01/12 20:40
很实用,收藏了
Specs 2014/01/13 23:49
@ 互相学习~~~
创业者技术社区 2014/09/09 17:18
很不错 很强大 学习了