js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码


Posted in Javascript onDecember 17, 2012

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。
IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码

document.body.offsetWidth 
document.body.offsetHeight

在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码
document.documentElement.clientWidth 
document.documentElement.clientHeight

IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸;
同时,除了IE以外的所有浏览器都将此信息保存在window对象中,可以用以下获取: 代码如下复制代码
window.innerWidth 
window.innerHeight

整个网页尺寸一般获得方法 代码如下复制代码
document.body.scrollWidth 
document.body.scrollHeight

屏幕分辨率高度一般获得方法 代码如下复制代码
window.screen.height 
window.screen.width

总结一下实例
function getViewSizeWithoutScrollbar(){//不包含滚动条 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滚动条 
if(window.innerWidth){ 
return { 
width : window.innerWidth, 
height: window.innerHeight 
} 
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
return { 
width : document.documentElement.offsetWidth, 
height: document.documentElement.offsetHeight 
} 
}else{ 
return { 
width : document.documentElement.clientWidth + getScrollWith(), 
height: document.documentElement.clientHeight + getScrollWith() 
} 
} 
}

IE,FireFox 差异如下:
IE6.0、FF1.06+: 
clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 
IE5.0/5.5: 
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height

另附个人最常用的获取整页宽高的方法(需要jquery框架) 代码如下复制代码
$(document).width() < $('body').width() ? $(document).width() : $('body').width(); 
$(document).height() < $('body').height() ? $(document).height() : $('body').height();

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

Javascript 相关文章推荐
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JS写滑稽笑脸运动效果
May 28 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 #Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 #Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 #Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 #Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 #Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php批量修改表结构实例
2017/05/24 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
pygame实现非图片按钮效果
2019/10/29 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python爬虫要用到的库总结
2020/07/28 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
六五普法规划实施方案
2014/03/21 职场文书
艺术节主持词
2014/04/02 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
世界名著读书笔记
2015/06/25 职场文书
python中取整数的几种方法
2021/11/07 Python