怎么样在javascript中得到当前窗口的高和宽呢？？？在线等待

10 个解决方案

#1

<BODY>
<SCRIPT LANGUAGE="JavaScript">
w =document.body.clientWidth;
h = document.body.clientHeight;
alert("高：" + w + "宽：" + h);

</SCRIPT>
</BODY>

#2

其他参数：
<BODY>
<SCRIPT LANGUAGE="JavaScript">
w =document.body.clientWidth;
h = document.body.clientHeight;

alert("窗口高：" + w + "宽：" + h);
alert("屏幕可用工作区高度：" + window.screen.availHeight);
alert("屏幕可用工作区宽度：" + window.screen.availWidth);
alert("屏幕总高度：" + window.screen.height);
alert("屏幕总宽度：" + window.screen.width);
</SCRIPT>

#3

楼上的，问一下，window.screen.availWidth-document.body.clientHeight是不是等于工具标题和工具栏的高？

#4

关注！

#5

document.body.clientHeight-window.screen.availHeight是不是标题和工具的栏的高啊，请问？

#6

两码事。
document.body.clientHeight你的页面所在的窗口的客户区高度（你可以改变一下你的窗口尺寸，看看有什么变化），除去了菜单、工具条和边框。与你的当前窗口的大小有关。
而window.screen.....为屏幕的有关尺寸，与当前窗口无关。

document.body.clientHeight-window.screen.availHeight在窗口最大化的时候才是标题和工具的栏的高 + 上下边框 + 状态栏高度。
一般很难精确计算，因为各个用户的偏好、字体大小可能不一样。

#7

再补充两个：

document.body.srollHeight //当前文档的高度，可视区加上滚动条滚动可以显示的区域
document.body.srollWidth //当前文档的宽度

#8

那我做右键菜单时，菜单在客户区窗口的位置判断应该是怎样的?我一直搞不清楚，msdn是个英文的

#9

你用这两个参数可以得到：

window.event.clientX + document.body.scrollLeft //left
window.event.clientY + document.body.scrollTop //top

再用<body oncontextmenu="window.event.returnValue=false"> 屏蔽鼠标右键原菜单

#10

一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<TITLE>跟随鼠标转动的眼球</TITLE>
<STYLE TYPE="text/css">
body{font-family:verdana,"宋体", Arial;background-color:#333399;color:gold;cursor:default}
.box {position:absolute;top:100;left:0;width:200;height:200;background-color:#00cccc; font-size:80px;text-align:center;color:#cc9933; z-index:-1}
.eye{position:absolute;top:0;left:0;font-size:20px;text-align:center;color:#000000;z-index:-2}
.ebox{position:absolute;top:0;left:0;font-size:64px;text-align:center;color:#000000;z-index:-3}
#mouth{position:absolute;top:0;left:0;font-size:72px;text-align:center;color:#000000;z-index:-4}
#face{position:absolute;top:0;left:0;font-size:200px;text-align:center;color:#000000;z-index:-5}

</STYLE>

<script>
var x,y,cx,cy,r=14,k=30; // r: 眼眶的半径，k 是左右眼中心与窗口中心的水平偏移量
var x1,y1,x2,y2;    // 左右眼球的相对坐标
    var a1, a2;         //  a1,a2 分别为左右眼球的角度
function adjust(){
x = event.clientX; // 鼠标的当前位置
y = event.clientY;
if(x>=bd.clientWidth|| y>=bd.clientHeight) return; // 当鼠标超出页面范围时返回
cx=bd.clientWidth/2; // 当前窗口的中心点坐标
cy=bd.clientHeight/2; //

// 求出左右眼球与其中心点的相对偏移
a1=Math.atan2(y-cy, x-cx+k);
x1= r*Math.cos(a1);
y1= r*Math.sin(a1);

a2=Math.atan2(y-cy, x-cx-k);
x2=r*Math.cos(a2);
y2=r*Math.sin(a2);
// 计算出左右眼球、眼眶、嘴、和脸的位置
eye1.style.left = cx + x1 -k -eye1.clientWidth/2 + bd.scrollLeft ;
eye1.style.top = cy + y1  - eye1.clientHeight/2 + bd.scrollTop ;
eye2.style.left = cx + x2 + k -eye2.clientWidth/2 + bd.scrollLeft ;
eye2.style.top = cy + y2 -eye2.clientHeight/2 + bd.scrollTop ;

ebox1.style.left = cx - k - ebox1.clientWidth/2 + bd.scrollLeft ;
ebox1.style.top = cy - ebox1.clientHeight/2 + bd.scrollTop ;
ebox2.style.left = cx + k -ebox2.clientWidth/2 + bd.scrollLeft ;
ebox2.style.top = cy - ebox2.clientHeight/2 + bd.scrollTop ;

mouth.style.left =cx - mouth.clientWidth/2 + bd.scrollLeft ;
mouth.style.top = cy + eye1.clientHeight/2 + bd.scrollTop  ;

face.style.left = cx -face.clientWidth/2 + bd.scrollLeft ;
face.style.top  = cy -face.clientHeight/3 + bd.scrollTop  ;

dump.innerHTML = " 鼠标当前坐标：x=" + x + " y=" + y; // 给出鼠标的当前位置
}
// 改变嘴巴的形状
function mouthX(i){
if(i==1) mouth.innerHTML="︿";
else mouth.innerHTML= "○";
}
</script>

</HEAD>
<BODY id="bd" onmousedown="mouthX(0)" onmouseup="mouthX(1)" onmousemove="adjust()">
<NOSCRIPT> <H1 style="color:red">本例子需要使用Javascript，如果你看到这行字，说明您的浏览器不支持Javascript。</H1>
</NOSCRIPT>
<div id=info style="z-index:6"><center><H1>跟随鼠标转动的眼球</H1>
本例子演示了用Javascrip 跟踪鼠标移动，以及块元素的绝对定位。
<h2>Javascript is GREAT!</h2>coded by:<a href="mailto:fwjsoft@yahoo.com.cn">OneStab</a>
</center></div>
<div id=dump> </div>

<div id=eye1 class=eye title="这是我的左眼, id=eye1">●</div>
<div id=eye2 class=eye title="这是我的右眼, id=eye2">●</div>
<div id=ebox1 class=ebox>○</div>
<div id=ebox2 class=ebox>○</div>
<div id=mouth title="您吃了吗？">︿</div>
<div id=face title="这是脸，id=face">○</div>

</BODY>
</HTML>

#1