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 Cookie 直接浏览网站分网址
Dec 08 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
Vue-Router的使用方法
Sep 05 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
substr()函数中文版
2006/10/09 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
CI框架附属类用法分析
2018/12/26 PHP
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
关于Python 3中print函数的换行详解
2017/08/08 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python语音识别实践之百度语音API
2018/08/30 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python 绘制国旗的示例
2020/09/27 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
甜点店创业计划书
2014/01/27 职场文书
教师网络培训感言
2014/03/09 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
骨干教师培训方案
2014/05/06 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
女方离婚起诉书
2015/05/18 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
vue实现列表垂直无缝滚动
2022/04/08 Vue.js