为什么js获取clientHeight的值为0？
新手学js，看教程里面的老师用document.body.clientHeight和document.body.clientWidth做那种漂浮的广告，就是到浏览器底部后...
新手学js，看教程里面的老师用
document.body.clientHeight和
document.body.clientWidth
做那种漂浮的广告，就是到浏览器底部后弹起去另外一个方向的那种，
那个教程里面的老师直接用那两个参数那个广告就正常运行了，
我这边就有点问题了，用clientHeight获取高度的时候出错了，
alert输出这个高度发现是0，
body默认的高度是o吗,
在css里面把body的Height固定了一下，然后程序才能正常运行，
那为什么那个教程里面的老师都没做body的高度，程序就正常运行了呢？想不通了，
我仔细检查了下他的代码，确实没设置高度，
当然我也不知道他是不是获取到了正确高度，
但是程序运行就没出错
代码在下面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js_ufo</title>
<style type="text/css">
#ufo{ width:100px; height:100px; background:#ccc; border:1px solid #000; line-height:100px; text-align:center; position:absolute;}
body{ height:570px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("ufo");
var le=0;
var ls=2;
var te=0;
var ts=2;
setInterval(function(){
le+=ls;
te+=ts;
if(le>=window.document.body.clientWidth-box.offsetWidth || le<=0){
ls=-1*ls
}
if(te>=window.document.body.clientHeight-box.offsetHeight || te<=0){
ts=-1*ts
}
box.style.left=le+"px";
box.style.top=te+"px";
},50)
}
</script>
<div id="ufo">我是飞船</div>
</body>
</html> 展开
document.body.clientHeight和
document.body.clientWidth
做那种漂浮的广告，就是到浏览器底部后弹起去另外一个方向的那种，
那个教程里面的老师直接用那两个参数那个广告就正常运行了，
我这边就有点问题了，用clientHeight获取高度的时候出错了，
alert输出这个高度发现是0，
body默认的高度是o吗,
在css里面把body的Height固定了一下，然后程序才能正常运行，
那为什么那个教程里面的老师都没做body的高度，程序就正常运行了呢？想不通了，
我仔细检查了下他的代码，确实没设置高度，
当然我也不知道他是不是获取到了正确高度，
但是程序运行就没出错
代码在下面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js_ufo</title>
<style type="text/css">
#ufo{ width:100px; height:100px; background:#ccc; border:1px solid #000; line-height:100px; text-align:center; position:absolute;}
body{ height:570px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("ufo");
var le=0;
var ls=2;
var te=0;
var ts=2;
setInterval(function(){
le+=ls;
te+=ts;
if(le>=window.document.body.clientWidth-box.offsetWidth || le<=0){
ls=-1*ls
}
if(te>=window.document.body.clientHeight-box.offsetHeight || te<=0){
ts=-1*ts
}
box.style.left=le+"px";
box.style.top=te+"px";
},50)
}
</script>
<div id="ufo">我是飞船</div>
</body>
</html> 展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js_ufo</title>
<style type="text/css">
#ufo{ width:100px; height:100px; background:#ccc; border:1px solid #000; line-height:100px; text-align:center; position:absolute;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("ufo");
var le=0;
var ls=2;
var te=0;
var ts=2;
setInterval(function(){
le+=ls;
te+=ts;
if(le>=document.documentElement.clientWidth-box.offsetWidth || le<=0){
ls=-1*ls
}
if(te>=document.documentElement.clientHeight-box.offsetHeight || te<=0){
ts=-1*ts
}
box.style.left=le+"px";
box.style.top=te+"px";
},50)
}
</script>
<div id="ufo">我是飞船</div>
</body>
</html>
改成这样，用document.documentElement.clientHeight获取浏览器显示区域的高度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js_ufo</title>
<style type="text/css">
#ufo{ width:100px; height:100px; background:#ccc; border:1px solid #000; line-height:100px; text-align:center; position:absolute;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("ufo");
var le=0;
var ls=2;
var te=0;
var ts=2;
setInterval(function(){
le+=ls;
te+=ts;
if(le>=document.documentElement.clientWidth-box.offsetWidth || le<=0){
ls=-1*ls
}
if(te>=document.documentElement.clientHeight-box.offsetHeight || te<=0){
ts=-1*ts
}
box.style.left=le+"px";
box.style.top=te+"px";
},50)
}
</script>
<div id="ufo">我是飞船</div>
</body>
</html>
改成这样，用document.documentElement.clientHeight获取浏览器显示区域的高度
追问
改了一下是成功了，但是为什么那个教程里面的那个人运行起来就没关系啊，想不通了
追答
恩。document.body这个标准是旧标准了，document.documentElement是新标准，你看的视频可能是比较老了，或者是测试的浏览器是老版的ie。你的这个问题，我刚学的时候也有遇过，后来在网上查了一下。有解释这个东西
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
