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压缩工具下载集合
Mar 06 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
Require.js的基本用法详解
Jul 03 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Vue中fragment.js使用方法小结
Feb 17 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
数据库相关问题
2006/10/09 PHP
PHP4实际应用经验篇(1)
2006/10/09 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
JS 时间显示效果代码
2009/08/23 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python七夕浪漫表白源码
2019/04/05 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
超级搞笑检讨书
2014/01/15 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
环保建议书100字
2014/05/14 职场文书
公司承诺书怎么写
2014/05/24 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
中学语文教学反思
2016/02/16 职场文书