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 相关文章推荐
Js动态创建div
Sep 25 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
document.createElement()用法
Mar 13 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 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
重置版宣传动画
2020/04/09 魔兽争霸
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
prototype class详解
2006/09/07 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
javascript常用方法总结
2015/05/14 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python opencv之分水岭算法示例
2018/02/24 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python 读取串口数据的示例
2020/11/09 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Yahoo的PHP面试题
2014/05/26 面试题
经管应届生求职信
2013/11/17 职场文书
幼儿发展评估方案
2014/06/11 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年市场部工作总结
2015/04/30 职场文书
单位同意报考证明
2015/06/17 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS