为啥js获取clientHeight的值为0?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥js获取clientHeight的值为0?相关的知识,希望对你有一定的参考价值。

新手学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>

参考技术A <!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获取浏览器显示区域的高度追问

改了一下是成功了,但是为什么那个教程里面的那个人运行起来就没关系啊,想不通了

追答

恩。document.body这个标准是旧标准了,document.documentElement是新标准,你看的视频可能是比较老了,或者是测试的浏览器是老版的ie。你的这个问题,我刚学的时候也有遇过,后来在网上查了一下。有解释这个东西

本回答被提问者采纳

以上是关于为啥js获取clientHeight的值为0?的主要内容,如果未能解决你的问题,请参考以下文章

js获取网页屏幕可见区域高度

js 赋给 checkbox 值 checkbox不选值为0 选择值为1【在线等】

request.getparameter 为啥获取的值为Null

为啥js计算999999*99.99会计算错呢

js 中与元素有关的高度

为啥数组的值是undefined