offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
前几天遇到一个问题，发现获取offsetWidth，和clientWidth的值时弹窗为0，在CSDN上询问了一下才明白了原因：在HTML的声明下，屏幕宽高是隐藏的，如果想要获得值，就需要在css中定义一下HTML和body的高度为100%。下面贴源码：
最先错误的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动图片--书上</title> <style type="text/css"> </style> </head> <body> <div id="AD" style="position:absolute;left:16px;top:80px;width:177px;height:195px;z-index:1;"> <img src="img/imgMove.jpg" width="177px" height="195px"> </div>
<script type="text/javascript">
var x=0,y=0; //浮动广告的初始位置
var xin=true,yin=true; //判断方向,xin为真向右运动，反之向左 yin为真，向下运动，反之向上
var step=1; //移动的距离
var delay=10; //移动的时间间隔 将会在在setTimeout上使用
function floatAD(){
var L=T=0; //L左边界 T上边界
var R=document.body.offsetWidth-document.getElementById("AD").offsetWidth;//获取宽
var B=document.body.offsetHeight-document.getElementById("AD").offsetHeight;// 获取高
document.getElementById("AD").style.left=x;//x轴加上的像素单位
document.getElementById("AD").style.top=y;//y轴加上的像素单位
// x轴
// 判断方向的真假，当xin为真时，step向右走，为假时向左走
x = x + step * (xin ? 1 : -1);
// 当x小于L时，xin为真,且x=0
if(x < L){
xin = true;
x = L;
}
// 当x大于R时，yin为假，且x=屏幕宽度-图片宽度
if(x > R){
xin = false;
x = R;
}
// y轴
// 判断方向的真假，当yin为真时，step向下走，为假时向上走
y=y+step*(yin?1:-1);
// 当y小于T时，yin为真,且y=0
if(y<T){
yin=true;
y=T;
}
// 当x大于B时，yin为假，且x=屏幕高度-图片高度
if(y>B){
yin=false;
y=B;
}
setTimeout("floatAD()",delay)
}
window.onload=floatAD;
</script> </body></html>
修改后：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动图片</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="AD" style="position:absolute;left:16px;top:80px;width:177px;height:195px;z-index:1;">
<img src="img/imgMove.jpg" width="177px" height="195px">
</div>
<script type="text/javascript">
var x=0,y=0; //浮动广告的初始位置
var xin=true,yin=true; //判断方向,xin为真向右运动，反之向左 yin为真，向下运动，反之向上
var step=1; //移动的距离
var delay=10; //移动的时间间隔 将会在在setTimeout上使用
function floatAD(){
var L=T=0; //L左边界 T上边界
var R=document.body.offsetWidth-document.getElementById("AD").offsetWidth;//获取宽
var B=document.body.offsetHeight-document.getElementById("AD").offsetHeight;// 获取高
document.getElementById("AD").style.left=x+"px";//x轴加上的像素单位
document.getElementById("AD").style.top=y+"px";//y轴加上的像素单位
// x轴
// 判断方向的真假，当xin为真时，step向右走，为假时向左走
x = x + step * (xin ? 1 : -1);
// 当x小于L时，xin为真,且x=0
if(x < L){
xin = true;
x = L;
}
// 当x大于R时，yin为假，且x=屏幕宽度-图片宽度
if(x > R){
xin = false;
x = R;
}
// y轴
// 判断方向的真假，当yin为真时，step向下走，为假时向上走
y=y+step*(yin?1:-1);
// 当y小于T时，yin为真,且y=0
if(y<T){
yin=true;
y=T;
}
// 当x大于B时，yin为假，且x=屏幕高度-图片高度
if(y>B){
yin=false;
y=B;
}
setTimeout("floatAD()",delay)
}
window.onload=floatAD;
</script> </body></html>
注：因为这篇文章的问题虽然是我问的，但是回答问题的是天际的海浪，所以归在了转载之列。在此再次感谢天际的海浪！
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 一维数组转二维数组
- 下一篇： Thinkphp+easyui 简单分页
