offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
来源：互联网 发布：mac怎么保存文档 编辑：程序博客网 时间：2024/06/07 02:08
前几天遇到一个问题，发现获取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=0if(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=0if(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=0if(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=0if(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>注：因为这篇文章的问题虽然是我问的，但是回答问题的是天际的海浪，所以归在了转载之列。在此再次感谢天际的海浪！0 0
- offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
- clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth
- clientWidth,clientHeight与offsetWidth,offsetHeight的区别
- clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth
- 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
- clientHeight，clientWidth，scrollWidth，scrollHeight，offsetWidth，offsetHeight的说明
- 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
- 元素大小之offsetWidth、offsetHeight、 clientWidth 和 clientHeight
- 有关获取屏幕坐标的clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
- CSS专题（二）：元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s
- javascript---之clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight等窗口属性说明
- CSS专题（二）：元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s
- ：元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHei
- (转)Android JSON解析详解（详细代码）
- 一个小程序
- 用户信用卡系统
- 感性认识spring的IoC
- PL/SQL 显式游标
- offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题
- 有些时候，有些判断是无法做到真实，但是能做到最优也不错了
- 来谈谈SQL数据库中"简单的"SELECT TOP—可能有你从未注意到的细节
- JAVA动态代理的理解(转载)
- poj 2485 prim入门题目
- 杭电oj（Java版）——1720 A+B Coming
- CSS样式的优先级
- 粉丝经济新时代来临，商虫云微信群控系统的商机你看到...
- tp ajax 搜索分页
