获取浏览器宽度,高度的代码和指示图

.

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 相对文档的水平座标+垂直方向滚动的量

 1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
 6 </meta></head>
 7 <body>
 8 <h2 align="center">请调整浏览器窗口大小</h2><hr />
 9 <form action="#" method="get" name="form1" id="form1">
10 <!--显示浏览器窗口的实际尺寸-->
11 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
12 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
13 </form>
14 <script type="text/javascript">
15 <!--
16 var winWidth = 0;
17 var winHeight = 0;
18 function findDimensions() //函数:获取尺寸
19 {
20 //获取窗口宽度
21 if (window.innerWidth)
22 winWidth = window.innerWidth;
23 else if ((document.body) && (document.body.clientWidth))
24 winWidth = document.body.clientWidth;
25 //获取窗口高度
26 if (window.innerHeight)
27 winHeight = window.innerHeight;
28 else if ((document.body) && (document.body.clientHeight))
29 winHeight = document.body.clientHeight;
30 //通过深入Document内部对body进行检测,获取窗口大小
31 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
32 {
33 winHeight = document.documentElement.clientHeight;
34 winWidth = document.documentElement.clientWidth;
35 }
36 //结果输出至两个文本框
37 document.form1.availHeight.value= winHeight;
38 document.form1.availWidth.value= winWidth;
39 }
40 findDimensions();
41 //调用函数,获取数值
42 window.onresize=findDimensions;
43 //-->
44 </script>
45 </body>
46 </html> 
时间: 2024-10-09 11:49:29

获取浏览器宽度,高度的代码和指示图的相关文章

js 获取浏览器宽度和高度

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条 ). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8.7.6.5: document.documentElement.clientHeight document.documentElement.cli

javascript获取浏览器的高度和宽度(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

document.body.clientHeight: IE.chrome.firefox: body对象高度(height+padding),body的默认高度为0 document.body.clientWidth: IE.chrome.firefox body对象的宽度(width+padding),body的默认宽度是浏览器宽度减去body的maring document.documentElement.clientHeight/document.documentElement.clie

JS获取浏览器的高度和宽度

### 实用的 JavaScript 方案(涵盖所有浏览器,不包括工具栏/滚动条): 1 var w=window.innerWidth 2 || document.documentElement.clientWidth 3 || document.body.clientWidth; 4 5 var h=window.innerHeight 6 || document.documentElement.clientHeight 7 || document.body.clientHeight; ##

获取浏览器视口高度device-width

在进行移动设备web开发时,我们总会用到这样一条代码“<meta name='viewport' content='width=device-width,initial-scale=1.0' />, 有了这个meta标签之后,移动设备访问时展现效果会好很多,但新的问题来了,这个device-width等于多少呢? 在js中使用window.innerWidth即可获取当前页面展现的实际宽带,同理window.innerHeight为实际显示高度.

[Jquery] Jquery获取浏览器宽高的代码

<script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(tr

获取浏览器宽度

<script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(tr

js jq获取浏览器各种高度

document.body.clientWidth; //网页可见区域宽(body) document.body.clientHeight; //网页可见区域高(body) document.body.offsetWidth; //网页可见区域宽(body),包括border.margin等 document.body.offsetHeight; //网页可见区域宽(body),包括border.margin等 document.body.scrollWidth; //网页正文全文宽,包括有滚动

JavaScript获取页面宽度高度

网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop(I

js 如何获取浏览器的高度?

<SCRIPT LANGUAGE="JavaScript"><!--var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和