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类库的顶层对象名用户体验分析
Oct 24 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
vue中英文切换实例代码
Jan 21 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
python 切片和range()用法说明
2013/03/24 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
旅游专业毕业生自荐书
2014/06/30 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
个人作风建设总结
2014/10/23 职场文书
先进工作者事迹材料
2014/12/23 职场文书
Python中else的三种使用场景
2021/06/16 Python
Python 中的Sympy详细使用
2021/08/07 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL