JavaScript获取网页各种宽度和高度的代码集
Js获取网页上的各种宽、高度值,比较全面了,包括网页可见区高度、宽度、正文高宽、屏幕分辨率宽高、网页被卷去的高度和宽度等,针对W3C标准,后面还对各浏览器的兼容性进行补救,会介绍各自浏览器下获取宽高值的不同代码,先来看JavaScript主函数:
<script language="javascript"> function getInfo() { var s = ""; s += " 网页可见区宽度:"+ document.body.clientWidth; s += " 网页可见区高度:"+ document.body.clientHeight; s += " 网页可见区宽度:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区高度:"+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文宽度:"+ document.body.scrollWidth; s += " 网页正文高度:"+ document.body.scrollHeight; s += " 网页被卷去的高度(ff):"+ document.body.scrollTop; s += " 网页被卷去的高度(ie):"+ document.documentElement.scrollTop; s += " 网页被卷去的左:"+ document.body.scrollLeft; s += " 网页正文部分上:"+ window.screenTop; s += " 网页正文部分左:"+ window.screenLeft; s += " 屏幕分辨率的高度:"+ window.screen.height; s += " 屏幕分辨率的宽度:"+ window.screen.width; s += " 屏幕可用工作区高度:"+ window.screen.availHeight; s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; //alert (s); } getInfo(); </script>
一般情况下,在IE、Opera下都可以使用:
document.body.clientWidth document.body.clientHeight
不过在FireFox下,上述则无效,需要使用:
document.documentElement.clientWidth document.documentElement.clientHeight
导致不相同的原因是因为W3C标准的原因,也就是页面中是否添加有下面这行:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果添加了,那么在各大浏览器中,需要如下编写代码:
//在IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 //在FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 //在Opera中: document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) //若没有添加W3C标准,则 //IE为: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 //FireFox为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) //Opera为: document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
总结的比较全面了,相信这些会有适合你用的。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法