JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,

最新推荐文章于 2024-12-16 15:14:20 发布

转载最新推荐文章于 2024-12-16 15:14:20 发布 · 634 阅读

文章标签：

#javascript #html

本文详细介绍了在不同浏览器中如何获取网页的各种尺寸信息，包括浏览器窗口尺寸、可见区域尺寸、滚动条位置等，并提供了实现这些功能的具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：http://blog.snsgou.com/post-574.html

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

(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

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

实现代码：

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

02"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03<html xmlns="http://www.w3.org/1999/xhtml">

04<head>

05<title>请调整浏览器窗口</title> <meta http-equiv="content-type"
content="text/html; charset=gb2312">

06</meta></head>

07<body>

08<h2 align="center">请调整浏览器窗口大小</h2><hr />

09<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<!--

16var winWidth = 0;

17var winHeight = 0;

18 

19//函数：获取尺寸

20function findDimensions() {

21 

22    //获取窗口宽度

23    if
(window.innerWidth) {

24        winWidth = window.innerWidth;

25    } 
else if 
((document.body) && (document.body.clientWidth)) {

26        winWidth = document.body.clientWidth;

27    }

28 

29    //获取窗口高度

30    if
(window.innerHeight) {

31        winHeight = window.innerHeight;

32    } 
else if 
((document.body) && (document.body.clientHeight)) {

33        winHeight = document.body.clientHeight;

34    }

35 

36    //通过深入Document内部对body进行检测，获取窗口大小

37    if
(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

38        winHeight = document.documentElement.clientHeight;

39        winWidth = document.documentElement.clientWidth;

40    }

41 

42    //结果输出至两个文本框

43    document.form1.availHeight.value = winHeight;

44    document.form1.availWidth.value = winWidth;

45}

46 

47findDimensions();

48 

49//调用函数，获取数值

50window.onresize = findDimensions;

51 

52//-->

53</script>

54</body>

55</html>

附 HTML 测试代码：

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02<html
xmlns="http://www.w3.org/1999/xhtml">

03<head>

04<title>属性值测试</title>

05<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

06<meta
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">

07<style
type="text/css">

08/* reset */

09body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;}

10body{font:12px/1.2 Arial, "宋体"; color:#333;vertical-align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;}

11button, input, select, textarea, label{vertical-align:middle;}

12img{vertical-align:top; border:none;}

13ul, ol{list-style:none;}

14a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;}

15a:hover{text-decoration:none; color:#f76f0e;}

16table{border-collapse:collapse; border-spacing:0;}

17b{font-weight: normal;}

18 

19/* test */

20body{border:10px solid #6F6;}

21.wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;}

22.div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;}

23.div2{margin-top:70px;border:1px solid #00F;}

24</style>

25<script
type="text/javascript"
src="js/jquery.js"></script>

26<script
type="text/javascript">

27 

28</script>

29</head>

30<body>

31    <div
class="wrapper"
id="wrapper">

32        <div
class="div1"
id="div1">

33            div1,div1,div1,div1,div1,div1,div1,div1,div1,

34            div1,div1,div1,div1,div1,div1,div1,div1,div1,div1

35        </div>

36        <div
class="div2"
id="div2">

37            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,

38            <br/>

39            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,

40            <br/>

41            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,

42            <br/>

43            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,

44            <br/>

45            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,

46        </div>

47    </div>

48</body>

49</html>

汇总

`01`	`////////浏览器视口的高度`

`02`	`function` `windowHeight() {`

`03`	`var` `myHeight = 0;`

`04`	`if` `(typeof(window.innerHeight) =='number') {`

`05`	`//Non-IE`

`06`	`myHeight = window.innerHeight;`

`07`	`}` `else` `if` `(document.documentElement && (document.documentElement.clientHeight)) {`

`08`	`//IE 6+ in 'standards compliant mode'`

`09`	`myHeight = document.documentElement.clientHeight;`

`10`	`}` `else` `if` `(document.body && (document.body.clientHeight)) {`

`11`	`//IE 4 compatible`

`12`	`myHeight = document.body.clientHeight;`

13 }

`14`	`return` `myHeight;`

15 }

`16`	`/////////浏览器视口的宽度`

`17`	`function` `windowWidth() {`

`18`	`var` `myWidth = 0;`

`19`	`if` `(typeof(window.innerWidth) =='number') {`

`20`	`//Non-IE`

`21`	`myWidth = window.innerWidth;`

`22`	`}` `else` `if` `(document.documentElement && (document.documentElement.clientWidth)) {`

`23`	`//IE 6+ in 'standards compliant mode'`

`24`	`myWidth = document.documentElement.clientWidth;`

`25`	`}` `else` `if` `(document.body && (document.body.clientWidth)) {`

`26`	`//IE 4 compatible`

`27`	`myWidth = document.body.clientWidth;`

28 }

`29`	`return` `myWidth;`

30 }

`31`	`/** 浏览器垂直滚动位置 **/`

`32`	`function` `scrollY() {`

`33`	`var` `de = document.documentElement;`

`34`	`return` `window.pageYOffset \|\| (de && de.scrollTop) \|\| document.body.scrollTop;`

35 }

36

`37`	`/** 浏览器水平滚动位置 **/`

`38`	`function` `scrollX() {`

`39`	`var` `de = document.documentElement;`

`40`	`return` `window.pageXOffset \|\| (de && de.scrollLeft) \|\| document.body.scrollLeft;`

41 }

42

`43`	`/** 当前页面高度 **/`

`44`	`function` `pageHeight() {`

`45`	`return` `document.body.scrollHeight;`

46 }

47

`48`	`/** 当前页面宽度 **/`

`49`	`function` `pageWidth() {`

`50`	`return` `document.body.scrollWidth;`

51 }