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 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
详解vue组件基础
May 04 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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多重接口的实现方法
2015/06/20 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
事务机电主管工作职责
2014/02/25 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
如何写辞职书
2015/02/26 职场文书
关于开学的感想
2015/08/10 职场文书