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 获取网页参数系统
Jul 19 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
获取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 验证码制作(网树注释思想)
2009/07/20 PHP
php异常处理使用示例
2014/02/25 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php生成微信红包数组的方法
2019/09/05 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python实现将xml导入至excel
2015/11/20 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
养殖行业的创业计划书
2014/01/05 职场文书
国旗下演讲稿
2014/05/08 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL