JavaScript获取浏览器高度和宽度值
IE中：
document.body.clientWidth ==> *DY对象宽度
document.body.clientHeight ==> *DY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> *DY对象宽度
document.body.clientHeight ==> *DY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上Margin高）
没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上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
scrollWidth ==> 获取对象的滚动宽度
scrollHeight ==> 获取对象的滚动高度
scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（被卷去的左）
scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（被卷去的高）
offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
event.clientX ==> 相对文档的水平座标
event.clientY ==> 相对文档的垂直座标
event.offsetX ==> 相对容器的水平坐标
event.offsetY ==> 相对容器的垂直坐标
document.documentElement.scrollTop ==> 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量
Jquery
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
实现代码：
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>请调整浏览器窗口</title>
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr/>
<p>1920*1200 </p>
<p>ie:55+24=79 1081 40</p>
<p>火狐：23+71+26=120 1040 40</p>
<p>谷歌：61 1099 40</p>
<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>
HTML 测试代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试1</title>
<style type="text/css">
/* reset */
body, label,p{margin:0; padding:0;}
body{font:12px/1.0 Arial, "宋体"; color:#333;}
p{
white-space: normal;
word-break: break-all;
word-wrap: break-word;
} </style>
<script type="text/javascript">
function show(){
var s = "";
s += "网页可见区域宽度clientWidth："+document.body.clientWidth;
s += "\n网页可见区域高度clientHeight："+document.body.clientHeight; s += "\n网页可见区域宽(body)，包括border等（包括边线）offsetWidth："+document.body.offsetWidth;
s += "\n网页可见区域高(body)，包括border等（包括边线）offsetHeight："+document.body.offsetHeight; s += "\n网页正文全文宽，包括有滚动条时的未见区域scrollWidth："+document.body.scrollWidth;
s += "\n网页正文全文高，包括有滚动条时的未见区域scrollHeight："+document.body.scrollHeight; s += "\n网页被卷去的Top(滚动条)scrollTop："+document.body.scrollTop;
s += "\n网页被卷去的Left(滚动条)scrollLeft："+document.body.scrollLeft; s += "\n浏览器距离Top（screenTop）："+window.screenTop;
s += "\n浏览器距离Left（screenLeft）："+window.screenLeft; s += "\n屏幕可用工作区域宽度screen.availWidth："+window.screen.availWidth;
s += "\n屏幕可用工作区域高度screen.availHeight："+window.screen.availHeight; s += "\n屏幕分辨率宽度screen.width："+window.screen.width;
s += "\n屏幕分辨率高度screen.height："+window.screen.height;
alert(s);
}
</script>
</head> <body style="margin:5px;padding:10px;border:15px solid #f00;">
<label>margin:5px; padding:10px; border:15px solid #f00;</label>
<p>w:-(5+15+15+5+17=57) h:15*2+20*2+10*2+10*2+12*2=134</p>
<div style="width:2000px;height:1500px;margin:10px;padding:15px;border:20px solid #ddd;">
<p>width:2000px; height:1500px; margin:10px; padding:15px; border:20px solid #ddd;</p>
<a onclick="show()" href="#">点击</a>
</div>
</body>
</html>
JavaScript获取浏览器高度和宽度值的更多相关文章
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- js 获取浏览器高度和宽度值(多浏览器)（转）
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)
三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- [转]js 获取浏览器高度和宽度值(多浏览器)（js获取宽度高度大全）
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- javascript获取浏览器高度与宽度信息
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- 转：JS获取浏览器高度和宽度
发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...
随机推荐
- Java多线程系列--“基础篇”03之 Thread中start()和run()的区别
概要 Thread类包含start()和run()方法,它们的区别是什么?本章将对此作出解答.本章内容包括:start() 和 run()的区别说明start() 和 run()的区别示例start( ...
- Android如何避免切换至SurfaceView时闪屏（黑屏闪一下）以及黑屏移动问题
1.最近的项目中,有一个Activity用到Fragment+ViewPager,其中一个fragment中实现了视频播放的功能,包含有SurfaceView.结果,每次打开程序第一次进入到该Acti ...
- Greenplum 数据库安装部署（生产环境）
Greenplum 数据库安装部署(生产环境) 硬件配置: 16 台 IBM X3650, 节点配置:CPU 2 * 8core,内存 128GB,硬盘 16 * 900GB,万兆网卡. 万兆交换机. ...
- Windows Azure Service Bus (1) 基础
<Windows Azure Platform 系列文章目录> 我们在基于Windows Azure进行云端开发的时候,云端的软件通常都需要与其他软件进行交互.这些其他软件可能包括其他In ...
- C# 线程系列三 定时器线程
上一篇文章我们讲诉了自定义线程执行器和任务处理器 我们继续来讲解自定义线程的定时执行器,我们在很多场景下需要做到某些状态或者数据进行更新,如果事情很多很杂,很时候时候会创建很多不同的定时器那么势必会照 ...
- JavaScript之旅（DOM）
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- 大话胖model和瘦model
今天业务完成到一定程度,查看下代码,猛然发现目前的这个代码有点奇怪.奇怪就奇怪在我的model中有很多文件,每个文件都对应数据库中的一张表,然后每个model中有很多是几乎没有什么逻辑代码的.比如: ...
- d
1.sql题1表名:成绩表姓名 课程 分数张三 语文 81张三 数学 75李四 语文 56李四 数学 9 ...
- block，inline,inline-block的区别
block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...
- [开源 .NET 跨平台 数据采集 爬虫框架: DotnetSpider] [一] 初衷与架构设计
[DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 为什么要造轮子 同学们可以去各大招聘网站查看一下爬虫工程师的要求,大多是招JA ...