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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
js实现登录验证码
Dec 22 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
vue - props 声明数组和对象操作
Jul 30 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递归调用与静态变量使用
2012/12/16 PHP
php计算一个文件大小的方法
2015/03/30 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
js实现碰撞检测
2021/01/29 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python3解释器知识点总结
2019/02/19 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
利用python生成照片墙的示例代码
2020/04/09 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
购房协议书范本
2014/04/11 职场文书
优秀求职信
2014/05/29 职场文书
求职自荐信怎么写
2015/03/04 职场文书
环境卫生整治简报
2015/07/20 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
Java版 单机五子棋
2022/05/04 Java/Android