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

How to get width of dynamic added elements with JavaScript

本文关键字：元素 添加 动态 何使用 JavaScript 获取      更新时间：2023-09-26

我想制作水平滚动的容器，它将子元素保持在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/

下面的代码正在工作，也许你的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());
相关文章：