网页可见区域宽:document.body.clientWidth
2 网页可见区域高:document.body.clientHeight
3 网页可见区域宽:document.body.offsetWidth (包括边线的宽)
4 网页可见区域高:document.body.offsetHeight (包括边线的宽)
5 网页正文全文宽:document.body.scrollWidth
6 网页正文全文高:document.body.scrollHeight
7 网页被卷去的高:document.body.scrollTop
8 网页被卷去的左:document.body.scrollLeft
9 网页正文部分上:window.screenTop
10 网页正文部分左:window.screenLeft
11 屏幕分辨率的高:window.screen.height
12 屏幕分辨率的宽:window.screen.width
13 屏幕可用工作区高度:window.screen.availHeight
14 屏幕可用工作区宽度:window.screen.availWidth
15
16
17 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
18 scrollHeight: 获取对象的滚动高度。
19 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
20 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
21 scrollWidth:获取对象的滚动宽度
22 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
23 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
24 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
25 event.clientX 相对文档的水平座标
26 event.clientY 相对文档的垂直座标
27 event.offsetX 相对容器的水平坐标
28 event.offsetY 相对容器的垂直坐标
29 document.documentElement.scrollTop 垂直方向滚动的值
30 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
31
32 IE,FireFox 差异如下:
33
34 IE6.0、FF1.06+:
35 clientWidth = width + padding 36 clientHeight = height + padding 37 offsetWidth = width + padding + border 38 offsetHeight = height + padding + border 39
40 IE5.0/5.5:
41 clientWidth = width - border 42 clientHeight = height - border 43 offsetWidth = width 44 offsetHeight = height 45
46 (需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
47 网页可见区域宽: document.body.clientWidth
48 网页可见区域高: document.body.clientHeight
49 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
50 网页可见区域高: document.body.offsetHeight (包括边线的高)
51 网页正文全文宽: document.body.scrollWidth
52 网页正文全文高: document.body.scrollHeight
53 网页被卷去的高: document.body.scrollTop
54 网页被卷去的左: document.body.scrollLeft
55 网页正文部分上: window.screenTop
56 网页正文部分左: window.screenLeft
57 屏幕分辨率的高: window.screen.height
58 屏幕分辨率的宽: window.screen.width
59 屏幕可用工作区高度: window.screen.availHeight
60 屏幕可用工作区宽度: window.screen.availWidth
61 -------------------
62 技术要点
63 本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
64 要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
65 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
66 Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
67 document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
68
69 实现代码
70 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
71 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
72 <html xmlns="http://www.w3.org/1999/xhtml">
73 <head>
74 <title>请调整浏览器窗口</title>
75 <meta http-equiv="content-type" content="text/html; charset=gb2312">
76 </head>
77 <body>
78 <h2 align="center">请调整浏览器窗口大小</h2><hr>
79 <form action="#" method="get" name="form1" id="form1">
80 <!--显示浏览器窗口的实际尺寸-->
81 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
82 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
83 </form>
84 <script type="text/javascript">
85 <!--
86 var winWidth = 0;
87 var winHeight = 0;
88 function findDimensions() //函数:获取尺寸
89 {
90 //获取窗口宽度
91 if (window.innerWidth) 92 winWidth = window.innerWidth; 93 else if ((document.body) && (document.body.clientWidth)) 94 winWidth = document.body.clientWidth; 95 //获取窗口高度
96 if (window.innerHeight) 97 winHeight = window.innerHeight; 98 else if ((document.body) && (document.body.clientHeight)) 99 winHeight = document.body.clientHeight; 100 //通过深入Document内部对body进行检测,获取窗口大小
101 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 102 { 103 winHeight = document.documentElement.clientHeight; 104 winWidth = document.documentElement.clientWidth; 105 } 106 //结果输出至两个文本框
107 document.form1.availHeight.value= winHeight; 108 document.form1.availWidth.value= winWidth; 109 } 110 findDimensions(); 111 //调用函数,获取数值
112 window.onresize=findDimensions; 113 //-->
114 </script>
115 </body>
116 </html>
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...