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()一章節。

總結

以上是生活随笔為你收集整理的原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。