js 获取浏览器高度和宽度值(多浏览器)


Posted in Javascript onSeptember 02, 2009

js 获取浏览器高度和宽度值(多浏览器) 
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高)

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</meta></head> 
<body> 
<h2 align="center">请调整浏览器窗口大小</h2><hr /> 
<form action="#" method="get" name="form1" id="form1"> 
<!--显示浏览器窗口的实际尺寸--> 
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br /> 
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /> 
</form> 
<script type="text/javascript"> 
<!-- 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 
{ 
//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//通过深入Document内部对body进行检测,获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//结果输出至两个文本框 
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//调用函数,获取数值 
window.onresize=findDimensions; 
//--> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Express框架之connect-flash详解
May 31 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 #Javascript
Javascript 判断函数类型完美解决方案
Sep 02 #Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 #Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 #Javascript
JavaScript 继承详解 第一篇
Aug 30 #Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 #Javascript
用cssText批量修改样式
Aug 29 #Javascript
You might like
php日历制作代码分享
2014/01/20 PHP
php发送与接收流文件的方法
2015/02/11 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
php实现简单加入购物车功能
2017/03/07 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Python中使用中文的方法
2011/02/19 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python判断变量是否为列表的方法
2020/09/17 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
学习十八大宣传标语
2014/10/09 职场文书
年终工作总结范文2014
2014/11/27 职场文书
微观世界观后感
2015/06/10 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis