如何使用JavaScript獲取動態添加元素的寬度

我想製作水平滾動的容器，它可以將子元素保留在y行上（寬度超過屏幕的100％）。如何使用JavaScript獲取動態添加元素的寬度

如果數據是固定的，我會在渲染和設置容器的寬度之前計算它。問題是我的數據是動態的，我不知道將要添加的子元素的數量和它們的寬度。所以我決定將它們動態地添加到容器DOM中作爲子項，但是當我嘗試在追加後獲得它們的寬度時，結果爲0.我做錯了什麼，或者如果你有更好的想法該怎麼做，我會很高興看到你的路。

這就是我現在所做的：

GalleryContainer.prototype.addItem = function(newItem) { 
    var newItemDiv = document.createElement('div'); 
    newItemDiv.className = 'thumbnail'; 

    content = document.createElement('img'); 
    content.setAttribute('src', newItem); 

    newItemDiv.appendChild(content); 
    this.galleryDiv.appendChild(newItemDiv); 
    this.galleryArray.push(newItemDiv); 

     // width, offsetWidth, all properties are 0 
     console.log(newItemDiv.style.offsetWidth); 
     console.log($(content).css('width')); 
     console.log($(newItemDiv).innerWidth()); 

}

編輯： 我做了一個的jsfiddle例如與我的問題，並在演示寬度不爲0，這是我需要的實際尺寸，所以我必須更深入地考慮問題。 http://jsfiddle.net/valkirilov/QaHn7/1/

來源

2013-10-30 valkirilov

你可以做一個小提琴，所以我們可以看到HTML/CSS，你也一樣？如果它給出'0'，那麼它可能是正確的。 – FiLeVeR10

這裏是[http://jsfiddle.net/valkirilov/QaHn7/1/](http://jsfiddle.net/valkirilov/QaHn7/1/）。但有一個新問題，在小提琴中一切正常，寬度不是0.我必須更深入地看問題。 – valkirilov

波紋管代碼工作，也許你newItemDiv不追加到HTML文檔：

var newItemDiv = document.createElement('div'); 
newItemDiv.className = 'thumbnail'; 
$('body').append(newItemDiv); 


// width, offsetWidth, all properties are 0 
console.log(newItemDiv.style.offsetWidth); 
console.log($(content).css('width')); 
console.log($(newItemDiv).innerWidth());

來源

2013-10-30 20:07:23 Morilog

如何使用JavaScript獲取動態添加元素的寬度

回答

相關問題