如何使用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获取动态添加元素的宽度

回答

相关问题