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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
vue实现购物车的小练习
Dec 21 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中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Python 除法小技巧
2008/09/06 Python
Python3基础之基本运算符概述
2014/08/13 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python3常用内置方法代码实例
2019/11/18 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
selenium如何定位span元素的实现
2021/01/13 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
第二课堂活动总结
2014/05/07 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
听证会主持词
2015/07/03 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js