增加和減少div的高度使用JS

我想創建一些簡單的JavaScript來執行時，我的按鈕被點擊。增加和減少div的高度使用JS

該div從高度0開始，因此它被「最小化」。然後執行函數test（）。它檢查div是否被最小化或最大化，如果它被最小化，那麼它將div高度增加5px直到它達到300的高度。並且如果該框被「最大化」，則它將該值減小5直到它達到0

這是我到目前爲止有：

var current = "minimized"; 
var divH = document.getElementById('module').offsetHeight; 

function test() { 
    if (current = "minimized") { 
     current = "maximized"; 

     while (divH < 300) { 
      divH = divH+5; 
     } 
    } 
    else { 
     current = "minimized"; 

     while (divH > 0) { 
      divH = divH-5; 
     } 
    } 
}

任何幫助，將不勝感激，這是毫不誇張地說我在使用JavaScript的第一次嘗試。

來源

2012-01-29 james

這是不會做一個好的動畫，你必須使用setTimeout insil的那個運行，而... – 2012-01-29 19:17:04

當你檢查的平等，使用==或（最好）===如果你只使用一個=它將分配而不是檢查通常總是評估爲真的平等（除非你指定了「虛假」值。 – kinakuta 2012-01-29 19:17:08

您需要編寫一個遞歸函數，以便您可以通過setTimeout（function，miliseconds）使用它; – 2012-01-29 19:19:20

你可以很容易地使用jQuery到animate div高度，它可以跨瀏覽器使用。雖然最好先學習Javascript作爲語言，但很快你會明白爲什麼使用類似jQuery的庫是一個好主意。

它將抽象出瀏覽器的不一致性，讓您專注於解決業務需求。

$('#module').animate({ height: 300 });

來源

2012-01-29 19:14:41

小心'只爲一件簡單的事情'的jQuery仇敵。 – rcdmk 2012-01-29 19:24:53

@rcdmk：我在這裏看到了一段關於JavaScript的引用：「你對javascript的瞭解越多，你就越鼓吹像jQuery這樣的工具的使用。」這只是一個明智的選擇，可以使用將瀏覽器不一致性抽象出來的東西。 – 2012-01-29 19:28:29

我不是說這是好的或不好的做法。我對JS和jQuery有很好的瞭解，現在幾乎像enyone一樣，在大多數項目中使用jQuery，它只是「重新發明輪子」來編程動畫函數。 – rcdmk 2012-01-29 19:32:58

你改變onlyyour變量，而不是div的實際高度

，你必須

divH=divH+5;

添加

document.getElementById('module').offsetHeight = divH;

哦，我還沒有看到，使用==而不是=作爲比較

來源

2012-01-29 19:16:04

增加和減少div的高度使用JS

回答

相關問題