javascript - if else 语句将图像大小传递给周围的 div

Question

在我的网站上，主要内容中的所有图像都包装在 div 容器中，如下所示:

<div class="imagecontainer">
  <img src="image.jpg" width="300" />
</div>

我需要将图像宽度添加到其周围的 div 中。这可以使用:

$('.imagecontainer').each(function() {
  $(this).width( $(this).find('img').attr('width') );
});

但仅当图像具有宽度属性时。如果我使用 width() 元素而不是 attr('width') ，则所有没有 width 属性的图像都会显示宽度 0。

我还尝试了几个 if-else 语句来检查:

1. 如果图像具有宽度属性，则将其添加到其周围的 div 中。
2. 否则使用图像显示的宽度并将其添加到其周围的 div 中。

但没有成功。

有没有办法获取图像显示的大小并将其添加到其周围的 div 中？

Answer 1

使用.width()是正确的方法，但您必须等待窗口加载，这样当您运行代码时，图像已经加载:

$(window).on('load', function () {
    $('.imagecontainer').each(function() {
        $(this).width( $(this).find('img').width() );
    });
});

您可能应该缓存该 $(this) 对象。