offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题

71 阅读 0 评论 47 点赞

我是靠谱客的博主无心白猫，最近开发中收集的这篇文章主要介绍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.οnlοad=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.οnlοad=floatAD;
		</script> </body></html>



注：因为这篇文章的问题虽然是我问的，但是回答问题的是天际的海浪，所以归在了转载之列。在此再次感谢天际的海浪！