JS不能减小height到0

CoffeePhoton 2010-11-29 08:24:13

我想写个特效，用JS控制 DIV 的 width 、height属性，但是发现最后 height alert出来已经减小到0了，页面还有一段，看着很不爽，目前效果如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

<style type="text/css">

#btnDiv{
position: absolute;
top: 400px;
left: 600px;
}

#main{
position: absolute;
top: 100px;
left: 600px;

}

</style>

<script type="text/javascript">

function small(){
//隐藏当前层
var objDiv = document.getElementById("main");
objDiv.style.display = "none";
//创建特效层
var newDiv = document.createElement("div");
newDiv.setAttribute("id","newDIV");
//newDiv.innerHTML = "abc";
newDiv.style.position = "absolute";
newDiv.style.top = "100px";
newDiv.style.left = "600px";
newDiv.style.width = "300px";
newDiv.style.height = "180px";
newDiv.style.border = "1px dashed black";
document.body.appendChild(newDiv);
//特效
effectSmall();
}

function effectSmall(){
var newDiv = document.getElementById("newDIV");
//alert(parseInt(newDiv.style.width)); //300

if(parseInt(newDiv.style.width) > 0){
var tempWidth = 0;
if(parseInt(newDiv.style.width) >= 5){
tempWidth = parseInt(newDiv.style.width) - 5;
}else{
tempWidth = 0;
}
newDiv.style.width = tempWidth + 'px';

var tempHeight = 0;
if(parseInt(newDiv.style.height) >= 3){
tempHeight = parseInt(newDiv.style.height) - 3;
}else{
tempHeight = 0;
}
newDiv.style.height = tempHeight + 'px';

timer = setTimeout('effectSmall()',10);
}else{
newDiv.style.display = "none";
}
if(parseInt(newDiv.style.height) < 30){
alert(parseInt(parseInt(newDiv.style.width) + "\t" + newDiv.style.height));
}
}

function big(){

clearTimeout(timer);

var objDiv = document.getElementById("main");
objDiv.style.display = "block";

var newDiv = document.getElementById("newDIV");
document.body.removeChild(newDiv);

}

</script>

</head>

<body>

<div id="main">
<table border="1px solid #345323" style="width: 300px; height: 180px;">
<tr><td align="center">top: 100px；left: 600px;</td></tr>
<tr><td align="center">222</td></tr>
<tr><td align="center">333</td></tr>
</table>
</div>

<div id="btnDiv">
<input type="button" value="缩小" onclick="small()" />
<input type="button" value="放大" onclick="big()" />
</div>

</body>
</html>

郁闷的是，后来发现在FF没问题，IE下始终有段height，很不爽，望高手帮下忙，怎么才有FF的效果

...全文

76 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

CoffeePhoton 2010-11-29

打赏
举报

我知道怎么回事了就如你所说溢出高度隐藏就能解决问题

http://bbs.blueidea.com/thread-2740031-1-1.html

原来在IE下DIV有个最小高度，是12px，就算设置5px，也会显示12px，不知道微软为啥要这样，奇怪...

hch126163 2010-11-29

打赏
举报

#btnDiv{
position: absolute;
top: 400px;
left: 600px;
overflow:hidden;
}

#main{
position: absolute;
top: 100px;
left: 600px;
overflow:hidden;
}

这样试试