原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示

jQuery实现此功能相对比较简单，具体参阅点击按钮动画方式隐藏和显示div一章节。

结合CSS3实现此功能也非常便利和适合，具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节。

原生JavaScript实现稍显麻烦，下面就通过代码实例介绍一下如何实现此功能。

代码实例如下：[HTML] 纯文本查看 复制代码运行代码

蚂蚁部落

#antzone{

width:200px;

background-color:green;

}

window.οnlοad=function(){

var speed=5;

var odiv=document.getElementById("antzone");

var obt=document.getElementById("bt");

obt.οnclick=function(){

if(odiv.style.display=="block"){

var timer=setInterval(function(){

if(parseInt(odiv.style.height)>0){

var H=parseInt(odiv.style.height);

H=H-speed;

odiv.style.height=H+"px";

} else{

odiv.style.display="none";

obt.value="点击显示";

clearInterval(timer);

}

},50)

}else{

var timer=setInterval(function(){

if(parseInt(odiv.style.height)<100){

odiv.style.display="block";

var H=parseInt(odiv.style.height);

H=H+speed;

odiv.style.height=H+"px";

}else{

obt.value="点击隐藏";

clearInterval(timer);

}

},50)

}

}

}

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

(1).window.οnlοad=function(){}，当文档内容完全加载完毕再去执行函数中的代码。

(2).var speed=5，设置高度调整的幅度。

(3).var odiv=document.getElementById("antzone"),获取id属性值为antzone的元素对象。

(4).var obt=document.getElementById("bt"),获取按钮元素对象。

(5).obt.οnclick=function(){}，为按钮注册onclick事件处理函数。

(6).if(odiv.style.display=="block"){}，判断元素是否处于显示状态。

(7).var timer=setInterval(function(){

if(parseInt(odiv.style.height)>0){

var H=parseInt(odiv.style.height);

H=H-speed;

odiv.style.height=H+"px";

}else{

odiv.style.display="none";

obt.value="点击显示";

clearInterval(timer);

}

},50),使用定时器函数不断的设置元素的高度。

odiv.style.height获取的是一个字符串，并且带有单位，所以必须使用parseInt()转换一下。

二.相关阅读:

(1).setInterval()方法参阅setInterval()一章节。

(2).parseInt()方法参阅JavaScript parseInt()一章节。

(3).clearInterval()方法参阅window.clearInterval()一章节。