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 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue3.0生命周期的示例代码
Sep 24 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
PHP VS ASP
2006/10/09 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
应聘护士自荐信
2013/10/21 职场文书
全陪导游欢迎词
2014/01/17 职场文书
青安岗事迹材料
2014/05/14 职场文书
片区教研活动总结
2014/07/02 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python