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 插件 将this下的div轮番显示
Apr 09 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 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
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JS 对象介绍
2010/01/20 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JS中的三个循环小结
2017/06/20 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python执行精确的小数计算方法
2019/01/21 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
华山导游词
2015/02/03 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2016中秋节问候语
2015/11/11 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
Python 正则模块详情
2021/11/02 Python