css轉換寬度和高度爲0絕對div不起作用

Question

我的目的是將div轉換爲寬度和高度0，從而逐漸使其對用戶不可見。 我有以下的絕對定位的div：

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div> 

當用戶按下關閉格，我連接到 「主」 分區下面的CSS類：

.collapseRecommendation { 


-webkit-transition: all 1.0s ease-in-out; 
    -moz-transition: all 1.0s ease-in-out; 
    -o-transition: all 1.0s ease-in-out; 
    transition: all 1.0s ease-in-out; 
} 

，並在JavaScript（ExtJS的）代碼div的寬度和高度設置爲0：

mainDiv.setStyle('width', '0px'); 
mainDiv.setStyle('height', '0px'); 

，我還設置了「主」分區不同的左側和頂部位置，這不正常工作。

但是隻有「主」div的高度和寬度設置爲0，但內部的div大小不會改變，並且它保持在同一位置並且對用戶可見，所以在轉換之後，我有以下幾點：

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div> 

正如你看到的內部div仍然有200x150大小。 什麼可能是它沒有變成大小的原因？ 謝謝

Answer 1

我們不應該指望孩子div的大小會改變嗎？

對於像div這樣的塊元素，它們的寬度僅取決於其父寬度，因爲大多數瀏覽器將塊元素視爲設置了width: 100%。但是，當您明確設置樣式時，此處理將被覆蓋，並且它們的尺寸完全獨立於另一個。

This JSFiddle顯示嵌套div的行爲，當您指定寬度時並不指定它們的寬度。如果你點擊divs，你會看到他們調整大小。頂級divs獨立調整;底部的div保持相同的寬度。同樣，這是因爲寬度沒有明確聲明。

解決方案是以編程方式更改每個子div的的尺寸。要做到這一點，你可以循環通過孩子，並設置他們的所有維度。代碼可能類似於：

var children = mainDiv.childNodes; 
for(i = 0; i < children.length; i++) { 
    if (children[i].nodeType == 1) { 
    // Do something with children[i] 
    } 
}