如何檢測HTML DIV的寬度和高度，一旦DIV做調整

Question

我有兩個div地方，一個在左邊是一個可摺疊的容器和一個在正確的工作是主容器，這樣的事情：

================================ 
|  |      | 
|  |      | 
|  |      | 
| div 1 |   div 2  | 
|  |      | 
|  |      | 
================================ 

我崩潰div 1使用簡單的css類和當div 1不可見時，div 2擴大大小，並接管其餘的空間。現在我需要獲得div 2的大小，一旦它完成調整大小（這不是即時的，它正在使用轉換）。

我想在div 2中渲染d3的東西，並需要知道div的正確尺寸。不幸的是，

$（ 「＃DIV2-ID」）。寬度（）

將返回未定義的結果。我認爲這主要是由於過渡。如何在調整大小後獲得div的正確寬度和高度？

Answer 1

閱讀這篇文章，因爲我相信是一種更準確的方法，因爲您在轉換結束後立即啓動事件。 Callback when CSS3 transition finishes

Answer 2

我想嘗試在過渡期間使用超時。

var delay = 2000; 
var t = setTimeout(function(){ 
    var width = $("#div2-id").width(); 
    clearTimeout(t); 
}, delay); 

的delay以毫秒爲單位，所以這是假定你的CSS過渡2s。

Answer 3

的transitionend事件

有一個叫transitionend事件。添加一個處理此事件將觸發任何動作後您的轉換結束，而不是使用延遲功能

例如點擊有文字的股利中的「左」的內部。當過渡結束的寬度具有文本框的div 「正確的」，會彈出

function handler(){ 
 
if(window.getComputedStyle){ 
 
alert(window.getComputedStyle(document.getElementById('right'), 'width').width) 
 
} 
 
else {document.getElementById('right').currentStyle.width} 
 
} 
 
function click(){ 
 
document.getElementById('left').style.width='0px' 
 

 
} 
 

 
document.getElementById('left').addEventListener("transitionend",handler); 
 
document.getElementById('left').addEventListener('click',click,false);

#left{ 
 
    float:left; 
 
    transition-property:width; 
 
    transition-duration:3s; 
 
    border:solid; 
 
    width:100px; 
 
    
 
} 
 
#right{ 
 
    border:solid; 
 
    overflow:hidden; 
 
}

<div> 
 
<div id="left"> 
 
left 
 
</div> 
 
<div id="right"> 
 
ddd 
 
</div> 
 
</div>

注意謹防

此事件此處僅支持瀏覽器版本http://www.w3schools.com/jsref/event_transitionend.asp