如何在基於javascript的動畫中獲取元素的最終尺寸

在我們的頁面中，我們經常使用基於javascript的動畫來使元素移動/調整大小，其中大多數使用setTimeout或setInterval來更改位置或大小元素：如何在基於javascript的動畫中獲取元素的最終尺寸

例如：

function open() { 
    var w=parseInt(foo.style.width); 
    if(w>=200) clearTimeout(t); 
    else{ 
    foo.style.width = +1+'px'; 
    t=setTimeout(open,20); // call doMove in 20msec 
    } 

} 

function init() { 
    foo = document.getElementById('dv'); // get the "foo" object 
    foo.style.width = '0px'; // set its initial position to 0px 
    open(); // start animating 
}

上面的代碼要慢慢地展現在div＃foo的，但你看，我的div maxwidth設置爲200至停止動畫。

但是如果內容div的實際大小應該超過200，那怎麼樣？

這就是說我無法得到元素的最終寬度。

什麼是通用解決方案？

這裏是live exmple：

來源

2011-11-06 hguser

P.S.如果你在全局範圍內，不要調用open方法，因爲它會中斷每個'window.open'調用。以防萬一。（但是你*不在全球範圍內，對吧？：]） – Ryan

如果大小<200px，請將步長設置爲1px。否則，根據最終寬度增加步長或縮短時間步長。 – Smamatti

使用修改的代碼，如下所示。它將繼續擴展，直到元素達到其全寬。

function open() { //See comment at OP 
    var w = foo.offsetWidht; // offsetWidht NOT style.width 
    var realWidth = foo.scrollWidth; 
    if(w < 200 || w < realWidth) { 
     foo.style.width = +1+'px'; 
     setTimeout(open, 20); // call doMove in 20msec 
    } 
}

而且，你不需要clearTimeout，因爲當函數被再次調用無超時已設置。

來源

2011-11-06 15:14:22

使用的計算方式不同的方法之一。谷歌「JavaScript計算寬度」，會有很多結果。首先嚐試酒店offsetWidth。我不記得它的兼容性表，但它絕對適用於Chrome，Safari和IE8/9。

來源

2011-11-06 15:13:29 Ryan

如何在基於javascript的動畫中獲取元素的最終尺寸

回答

相關問題