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 ==> ...
随机推荐
- poj 3352Road Construction（无向双连通分量的分解）
/* 题意:给定一个连通的无向图G,至少要添加几条边,才能使其变为强连通图(指的是边强联通). 思路:利用tarjan算法找出所有的双联通分量!然后根据low[]值的不同将双联通分量 进行缩点,最后图 ...
- asp.net mvc笔记一，最小的MVC工程
Asp.net MVC项目默认会引用很多第三方插件,特别是现在的5.0,默认示例项目就几十M,搞得都不知道那些才是MVC必须的,是重点,那些是可有可无的. 今天我们就来试验一下,看看一个最小的MVC工 ...
- 【原创】.NET读写Excel工具Spire.Xls使用(4)对数据操作与控制
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...
- Java中不同的并发实现的性能比较
Fork/Join框架在不同配置下的表现如何? 正如即将上映的星球大战那样,Java 8的并行流也是毁誉参半.并行流(Parallel Stream)的语法糖就像预告片里的新型光剑一样令人兴奋不已.现 ...
- $("#id").val()取值textarea是""
今天取值的时候,判断是null可以通过,证明不是null,明明是空的. 判断是''通过,证明取出来的是''空字符串.
- SQL Server 存储(4/8)：理解Page Free Space (PFS) 页
我们已经讨论了GAM与SGAM页,数据页(Data Page) ,现在我们来看下页面自由空间页(Page Free Space (PFS) ). PFS在数据文件里是第2页(页号1,页号从0开始),接 ...
- 意译：《JVM Internals》
译者语 为加深对JVM的了解和日后查阅时更方便,于是对原文进行翻译.内容是建立在我对JVM的认识的基础上翻译的,加上本人的英语水平有限,若有纰漏请大家指正,谢谢. 原文地址:http://blog.j ...
- JS魔法堂：元素克隆、剪切技术研究
一.前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率 ...
- Win10 QQ五笔默认中文，InputMode默认中文
Win10系统安装了QQ五笔后,InputMode默认英文,必须用鼠标点或者按 Ctrl+空格才能转换为中文.非常不方便. 即使将微软拼音默认为中文也不管用,解决方法如下: 设置后,无论你打开运行.记 ...
- jQuery的目标
jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的.从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库.jQuery改变ja ...