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 相关文章推荐
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
vue离开当前页面触发的函数代码
Sep 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
php生成随机颜色的方法
2014/11/13 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
PHP面试题及答案二
2015/05/23 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
和睦家庭事迹
2014/05/14 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
安全责任书范文
2014/08/25 职场文书
学用政策心得体会
2014/09/10 职场文书
如何书写邀请函?
2019/06/24 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis