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如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
js实现登录与注册界面
Nov 01 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
用vue设计一个日历表
Dec 03 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
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
使用数据库保存session的方法
2006/10/09 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php7下的filesize函数
2019/09/30 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
网站上面有这种切换效果
2006/06/26 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python sorted对list和dict排序
2020/06/09 Python
如何选择使用结构还是类
2014/05/30 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
网管求职信
2014/03/03 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
体育专业求职信
2014/07/16 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
毕业生个人总结
2015/02/28 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python