Question

jQuery方法.width()用于将生成的元素的宽度设置为：

html: 
<div class='row-fluid' id='photo-preview'></div>
javascript:
 for(i = 0;i < 4;i++){
    var imageSpan = "<div class='span3' id='span_" + i + "'><img src='" + images[i] +"'></div>"
    $('#photo-preview').append(imageSpan);
    var w = $('#span_' + i).width(); 
    console.log(w);
  }

但它的宽度值不正确。这是百分比而不是像素的值。例如，w应为400（400px），但js为80（80％）。

我认为问题可能是因为元素是动态生成的。在控制台中，当加载了所有元素时，我可以使用.width()获得正确的值。

有任何想法可以解决吗？

Answer 1

在获得正确的高度之前，您必须等待图像的加载事件。

var img = '<img src="img_path.jpg">';
$(img)
    .load(function() {
        console.log("width", $(this).width());
    })
    .appendTo('#photo-preview');

编辑：与您的示例匹配：

html: 
<div class='row-fluid' id='photo-preview'></div>
javascript:
 for(i = 0;i < 4;i++){
    var img = "<img src='" + images[i] +"'>";
    $(img)
        .load(function() {
            console.log("width", $(this).width());
        })
        .appendTo("<div class='row-fluid' id='photo-preview'>")
        .appendTo('#photo-preview');

  }

Answer 2

尝试使用offsetWidth

即

var w =  $('#span_' + i).offsetWidth;
console.log(w);

这是我制作的一个非常愚蠢的小提琴。我将宽度设置为80％。如果你去控制台，你应该看到像素宽度（448像素）

http://jsfiddle.net/bwm5s/

在生成的内容上使用width（）获取宽度

2 个答案: