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 16 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP的博客ping服务代码
2012/02/04 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
CI框架表单验证实例详解
2016/11/21 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
python制作一个桌面便签软件
2015/08/09 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
django使用graphql的实例
2020/09/02 Python
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
家长评语和期望
2014/02/10 职场文书
经济担保书范文
2014/04/02 职场文书
个人年终总结结尾
2015/03/06 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记