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实现原生ajax的几种方法介绍
Sep 21 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
JS之相等操作符详解
Sep 13 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
koa router 多文件引入的方法示例
May 22 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
获取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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
js获取页面description的方法
2015/05/21 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
在Python中表示一个对象的方法
2019/06/25 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python 切分数组实例解析
2019/11/07 Python
简单了解python数组的基本操作
2019/11/26 Python
python 如何区分return和yield
2020/09/22 Python
新学期红领巾广播稿
2014/01/14 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
旅游安全责任协议书
2016/03/22 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
如何用python绘制雷达图
2021/04/24 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python