js无法设置div width与height的问题

0 0

js无法设置div width与height的问题10


<html>
<div width="200" height="300" id="div1" style="display:none">1</div>
<html>
	
<script type="text/javascript">
		
		var div1 = document.getElementById('div1');	

		div1.style.visibility = "visible";
		div1.style.display = "block";
		div1.style.overflow= "hidden";

		alert('before:'+div1.offsetWidth);
		div1.style.width = "0px";
		alert('after:'+div1.offsetWidth);		
				
		alert('before:'+div1.offsetHeight);
		div1.style.height = "0px";
		alert('after:'+div1.offsetHeight);
		
		alert('为什么offsetWidth可以设置为0；而offsetHeight不能设置为0');
			
</script>

如代码所示，为什么设置width可以，而设置height不行，求解答。我在开发的时候，遇到了这个问题，截取部分内容想请教一下各位大虾。

JavaScript

2010年9月28日 09:03

superfofo
5
0 0 0

4个答案按时间排序按投票排序

0 0

你为什么要都设置为0呢，直接隐藏掉不行吗

2010年9月28日 17:20

zhao103804
88
0 0 1

添加评论

0 0

首先，你的代码中没有申明DTD，所以，在IE下，id=div1的div表现为height就是最小高，类似于min-height(IE6不识别该属性)，所以，它的高将随内容而走。默认的，浏览器里的字大小为16px，所以，你的div在IE下的高度就是16px，即使你设置了height，这个div的高度，仍然会随你的内容而变化。但是，如果你去FireFox下打开的话，那么，你设置的这个div的高度将是起作用的。因为，FireFox是遵守W3C标准的。具体的内容可以通过给div给border来查看。
举例：
<div style="height:6px;border:1px solid #000;">ABC</div>
将这个内容放置在一个单独的html中，分别用IE和FireFox打开看一下就可以知道差别了。
想让他们保持一致的话，请给页面的第一行加上一下内容：
<!DOCTYPE html>
然后在对比IE和FF

其次，div是一个无样式属性的标签，你对div设置的width，height都是错误的，这些属性只有写在style里或者css中才有效。
第三，你设置的是height，但是，你问的问题是offsetHeight，还有，你的问题和你的代码不一致，让人很疑惑。

如果你是一个前端工程师，那你就需要学习一下这些html，xhtml这些必须的知识，如果你只是一个客串前台的后台程序员，则不需要在这个内容上下很大的功夫，这个交给前端工程师去解决吧！

2010年9月28日 16:49

xinxinsong
19
0 0 0

添加评论

0 0

给div设置百分比的高度，他的外框一定要有一个固定的高度，如你所述，即使我给某个高度50%的div的外部div设置高度100%，这个外部div的100%又是以那个的高度为参照物呢，如果100%的div的父级div有一个固定的高度，那么100%的div和50%的div高度都是以有固定高度的div为参照的，如果100%的div并没有一个参照物，那么他的100%高度也是不生效的，自然50%的div也不会生效。

2010年9月28日 15:13

pwc_pengwenchao
411
0 0 4

添加评论

0 0

<!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></head>
<body>
<div width="200" height="300" id="div1" style="display:none">1</div>  
<script type="text/javascript">   
           
        var div1 = document.getElementById('div1');    
  
        div1.style.visibility = "visible";   
        div1.style.display = "block";   
        div1.style.overflow= "hidden";
		div1.style.border="1px solid red";
  
        alert('before:'+div1.offsetWidth);   
        div1.style.width = "0px";   
        alert('after:'+div1.offsetWidth);          
                   
        alert('before:'+div1.offsetHeight);   
        div1.style.height = "0px";
        alert('after:'+div1.offsetHeight);   
           
        alert('为什么offsetWidth可以设置为0；而offsetHeight不能设置为0');   
               
</script> 
</body>
</html>

2010年9月28日 09:52