JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

r.C9_ s:T!b0网页可见区域宽：document.body.clientWidth若鄰博客R|ZX8i9pwq
网页可见区域高：document.body.clientHeight
(K6Ua7k(T0网页可见区域宽：document.body.offsetWidth (包括边线的宽)若鄰博客,J"r.et8s#[
网页可见区域高：document.body.offsetHeight (包括边线的宽)
A%Wo(X sEW5Q0网页正文全文宽：document.body.scrollWidth若鄰博客J |$S R9S6X2^eu
网页正文全文高：document.body.scrollHeight若鄰博客'BaB@.JCPgF2_
网页被卷去的高：document.body.scrollTop若鄰博客4wO4q:C+}
xq
网页被卷去的左：document.body.scrollLeft

a3Jvi@/m0网页正文部分上：window.screenTop若鄰博客;}xTKC
ysK
网页正文部分左：window.screenLeft若鄰博客]5{'R7N:xno
屏幕分辨率的高：window.screen.height若鄰博客3{ K(hn)qF-Cuc}m$J
屏幕分辨率的宽：window.screen.width若鄰博客c KH].lsNFk
屏幕可用工作区高度：window.screen.availHeight
C,?)N#Y Z0屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
6nq*{1h-IQo%i0T0scrollHeight: 获取对象的滚动高度。若鄰博客~)Hav1c7\a.P4X
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离若鄰博客#D5d o oe$Bs
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
-S5^boS4QofrG0scrollWidth:获取对象的滚动宽度若鄰博客$rooOIDs6E#j
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
2O(Ra!a
M
cir dk0offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置若鄰博客*O,eG(BNljH
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
'@Rv*G1A5b g$V&G0event.clientX 相对文档的水平座标若鄰博客n.A'byRh,`
event.clientY 相对文档的垂直座标若鄰博客U%u"e3Tkf X/v
event.offsetX 相对容器的水平坐标
;Y`wDk;t \ l E0event.offsetY 相对容器的垂直坐标若鄰博客#v%BM8J\.Pb;t
document.documentElement.scrollTop 垂直方向滚动的值若鄰博客)?,PtU!jJ
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量若鄰博客PR7fEJx2m"K1HY&N

zZg7B9F0IE，FireFox 差异如下：若鄰博客t-_3@Uq0r.@H]k

IE6.0、FF1.06+：

clientWidth = width + padding若鄰博客6n_:~\^#uI/U!S

clientHeight = height + padding

2KX(}(C.G%E,i;["b0offsetWidth = width + padding + border

offsetHeight = height + padding + border

v/K\$EolA0IE5.0/5.5：
4e9TGA/[c0clientWidth = width - border若鄰博客vZQl4Yg

sd8b4CyYQH0clientHeight = height - border

,rNf3o&K w0offsetWidth = width若鄰博客sPiM]mW

Z~6{O#Sv6~4|y+~b0offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)若鄰博客 i%w0Rx9U

(I"[&st2j-vy2t `@0网页可见区域宽： document.body.clientWidth若鄰博客*g+EfW)G6HL
网页可见区域高： document.body.clientHeight若鄰博客1Wn'pj2b2J+GY4{
网页可见区域宽： document.body.offsetWidth (包括边线的宽)若鄰博客d#GFi+PzR
网页可见区域高： document.body.offsetHeight (包括边线的高)若鄰博客@i~3Y
v/p \
Wr
网页正文全文宽： document.body.scrollWidth
G}jp]Z0网页正文全文高： document.body.scrollHeight若鄰博客 I2lB5P?)|5p
网页被卷去的高： document.body.scrollTop若鄰博客K:pv(nFA
网页被卷去的左： document.body.scrollLeft
XA G6y$l0网页正文部分上： window.screenTop
5r-jn8H|0网页正文部分左： window.screenLeft若鄰博客/M{]1F3LI
屏幕分辨率的高： window.screen.height
1K:ho(~0W
j0屏幕分辨率的宽： window.screen.width

y!kG6h-k7^$k$U@r
U0屏幕可用工作区高度： window.screen.availHeight若鄰博客 VMuJB ~s
屏幕可用工作区宽度： window.screen.availWidth

1B,F
}sJ'_?M/B/q0－－－－－－－－－－－－－－－－－－－若鄰博客
v0a"iWT.Ig0l
m

C7jV.kA^q!M0技术要点
-nC1J,rw-~2?0本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

$^U"S2hjq4M0要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

/TF1Eg5@Z @0Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

cdq H*R0document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

1
*H7Gq5v4I#u`]c%L02若鄰博客#H8El{ NN4icO
3若鄰博客DeD{_@i
4
a,Dk8ly
{#y/?d+W05若鄰博客j6I3e*]zU/L
6若鄰博客5r#A
K3DaF
@#K;i
7
HJ1v:x'c9~08
/L)VEzRd9x4NY5{09若鄰博客7DX~G
_k9C*{
10若鄰博客_%x#@/KRe
A#\\
11
(A6d0Re?|^'y'w`012
/lH8k7~~%\013若鄰博客Pz"RGOr/`
14
D;~,P)s3@$^(f2T}2B015
%h+}NM#YCV"^4z#a;Vi!B016
&o.t7[
L"H5SNVi4d017若鄰博客!Pjbw@0Z
18
Lh6j:?.lOa;sE019
.W"_
s/B9@r020
5g	`,us+U
I'w021若鄰博客BiP*Md,X]
22
TVv2T*G(j9Y6b%b023
J@9@n+H	u6pE024
EB]ee/SRUt025
M_B1A,Wq(a026
B
u}$S{!F!c'W027
tl;P4OvM/D028
4wX8T#@%y^-Oy.Dd029若鄰博客2F;j/Pa7_n"Ss
30
A-[lXv}031
qv0gDpz(x032若鄰博客h	ed+cLDW
33
Il7B]S7}034
$b)hpHI#iG035若鄰博客1N-w)rwK }1[z(L-~
36
:y5l3]$T
Ba037
Wb$oBLpZ038
2Osu1[o039
g"S;|i5?6N040若鄰博客2o4B&IbF6R|3vb
41若鄰博客6S:j1F3\1|a8EjR"w
42
4d8j@+CzE"Y{H*@043若鄰博客'{3|M-y3DdH#qZ6|iw
44若鄰博客6X$PV/w m7O*mO4x
45若鄰博客;t`Xq8_
46若鄰博客%E;T!~4{9we~
47
*?c%oo0c+O	_048

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"若鄰博客/Ff3V-k2DKM,F'@gd
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
m7]yN!rj0<html xmlns="http://www.w3.org/1999/xhtml">若鄰博客-|%zM
P'S$[6|z
<head>若鄰博客&KLMe`8t$g.R$}
<title>请调整浏览器窗口</title>若鄰博客N8V3M#?	K
j^'G/T0\)P4?
<meta. http-equiv="content-type" content="text/html; charset=gb2312">
os-W)b7ZR0</meta></head>
2Rvg%D}[IT0<body>
d(ADDGMR8Uh0<h2 align="center">请调整浏览器窗口大小</h2><hr />
H_S$B%K3L$h|0<form. action="#" method="get" name="form1" id="form1">若鄰博客Xi6s)OtL
<!--显示浏览器窗口的实际尺寸-->
!oNSG$X7N0浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
x&`^JWh0浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
E7E@1q0pv0</form>若鄰博客3d'Zm1Afb*JE
<script. type="text/javascript">
W{,XDt0<!--
[~8qPeho:},M0var winWidth = 0;若鄰博客1qBO
b}
var winHeight = 0;若鄰博客te8f9]5T
function findDimensions() //函数：获取尺寸
'jo1rff
dcB2zn}0{若鄰博客;a d8C(F	S
//获取窗口宽度
0X
o
aJ"B$l0if (window.innerWidth)若鄰博客)Rb(iC6??%bN8`x6O
winWidth = window.innerWidth;若鄰博客)gj3aK
k5VWb
else if ((document.body) && (document.body.clientWidth))
nV3c!h`?7F0winWidth = document.body.clientWidth;若鄰博客3p'GESdyG
\
//获取窗口高度
x\&C#Np0if (window.innerHeight)

@A$?j,W:SI0p0winHeight = window.innerHeight;
vcO+]IT
C${	{1i0else if ((document.body) && (document.body.clientHeight))若鄰博客	`,s?3_JP%}"s9[
winHeight = document.body.clientHeight;若鄰博客-O#T%fl'b
//通过深入Document内部对body进行检测，获取窗口大小
J|Y8P9jhvQ*G0if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)若鄰博客-N
J3z_1oC5M`
{
"_5qA7t"U/yc2~0winHeight = document.documentElement.clientHeight;
YM-{]+cGq;T0winWidth = document.documentElement.clientWidth;若鄰博客
GRwv4E)dWBD"L
}
^,S-D1}4?!d8I.{0//结果输出至两个文本框
}.R6fB5|P%p0document.form1.availHeight.value= winHeight;
5F Y2d[K'J+u0document.form1.availWidth.value= winWidth;
%\+K{+W5W~0}若鄰博客%l!w
{2i^v
findDimensions();若鄰博客'|0MU\ D'O
//调用函数，获取数值若鄰博客$W5UJ0E0UU
window.onresize=findDimensions;若鄰博客vb1YPr	r

n&If9BxA o5@aYRz0//-->若鄰博客k,s(YrE5q&x:V
</script>若鄰博客WJi5IPa(J
</body>若鄰博客!J+F6Y,|-g
</html>

eXhX3V ot9~0源程序解读

2w#\E?4Gj3D`j.F0（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。若鄰博客7J)CsC.pvq

ZxKi/I4yR6Lx c5`0（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

G u'y@S9r0（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

Z,\3hV1A0（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
|/Kp4u/_0若鄰博客w+c+di:?`![q[