如何使用 javascript/jquery 获取元素的*渲染*宽度？尝试的所有方法仅产生内在宽度

Answer 1

使用

$(window).on("加载", function( ){ ... })

是您等待图像加载所需的。

请参阅下面的代码片段。请注意，我的 css 基于您在 html 中包含的高度信息。图像的固有宽度为 200 和 210。

$(window).on("load", function(){
  var elements = $('#imagecontainer>p').children();
  var widths = [];

  elements.each(function() {
    widths.push(this.width);
  });

  console.log(widths);
});

#bilder {
  height: 70vh;
  background-color: red;
  padding: 20px;
}
div {
  height: 100%;
  border: 2px solid black;
}
#slider {
  height: 70%;
  background-color: green;
  padding: 20px;
}
p {
  height: 100%;
  border: 2px solid yellow;
}
img {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="bilder">                 | height: 70vh;
  <div id="pappediv">             | height: 100%;
    <div id="slider">             | height: 70%;
      <div id="imagecontainer">   | height: 100%;
        <p>                       | height: 100%;
          <img src="https://placebear.com/g/200/300">                | height: 100%;
          <img src="https://picsum.photos/210/300">                  | height: 100%;
          <iframe>
          </iframe>
        </p>
      </div>  <!-- END imagecontainer -->
    </div>  <!-- END slider -->
  </div>  <!-- END pappediv -->
</div>  <!-- END bilder -->