Question

我想制作水平可滚动的容器，它将子元素保留在y线上（宽度超过屏幕的100％）。

如果数据是固定的，我会在渲染之前计算它并设置容器的宽度。问题是我的数据是动态的，我不知道将要添加的子元素的数量和它们的宽度。所以我决定将它们作为子项添加到容器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/

Answer 1

下面的代码正在运行，也许你的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());

如何使用JavaScript获取动态添加元素的宽度

1 个答案: