如何用JavaScript/jQuery获取元素的渲染宽度？多种方法尝试未果

我有一个滑块，HTML结构及对应CSS高度设置如下：

<div id="bilder">                 <!-- height: 70vh; -->
  <div id="pappediv">             <!-- height: 100%; -->
    <div id="slider">             <!-- height: 70%; -->
      <div id="imagecontainer">   <!-- height: 100%; -->
        <p>                       <!-- height: 100%; -->
          <img>                   <!-- height: 100%; -->
          <img>                   <!-- height: 100%; --> 
          <iframe>                <!-- height: 100%; -->
          <!-- 共约12张图片+1个iframe，所有标签已闭合 -->

我需要将所有图片的渲染宽度存入数组，使用的JavaScript代码如下：

$(document).ready(function(){
  var elements = $('#imagecontainer>p').children();
  var widths = [];
  elements.each(function() {
      widths.push(this.width);
  });
  console.log(widths);
});

代码能返回宽度值，但都是图片的固有宽度，不是依赖视口高度的渲染宽度。尝试过outerWidth、offsetWidth、clientWidth、getBoundingClientRect()、getComputedStyle()等方法，改用$(window).on('load')时机也无效。

1. 确保布局完全稳定后再获取尺寸
   window.load事件仅保证资源加载完成，但浏览器可能还在计算布局（尤其是滑块类组件可能会动态调整元素尺寸）。可以用requestAnimationFrame延迟到下一次重绘前执行，此时元素的渲染尺寸已经确定：

   $(window).on('load', function() {
     requestAnimationFrame(function() {
       // 只筛选img元素，排除iframe
       var elements = $('#imagecontainer>p').children('img');
       var widths = [];
       elements.each(function() {
         // 获取渲染后的实际宽度
         var renderWidth = this.getBoundingClientRect().width;
         widths.push(renderWidth);
         // 或使用jQuery方法：widths.push($(this).width());
       });
       console.log(widths);
     });
   });
   

2. 检查滑块组件的初始化时机
   如果使用了第三方滑块插件（如Swiper、Glide等），插件会在资源加载后动态初始化并调整元素尺寸。此时需要在插件的初始化完成回调中获取宽度，而非通用的load事件。例如Swiper的示例：

   var mySwiper = new Swiper('#slider', {
     // 滑块配置
     on: {
       init: function() {
         // 滑块初始化完成后获取图片宽度
         var elements = $('#imagecontainer>p').children('img');
         var widths = [];
         elements.each(function() {
           widths.push(this.getBoundingClientRect().width);
         });
         console.log(widths);
       }
     }
   });
   

3. 排除干扰元素
   原代码中children()会包含iframe，建议明确筛选img元素，避免非目标元素影响结果。

4. 验证CSS布局逻辑
   确认所有父元素的高度计算是正确的：#bilder的70vh是否正确作用，嵌套的height:100%是否能正确继承高度。可以在浏览器开发者工具中检查图片元素的computed样式，确认其高度是否符合预期，进而验证宽度是否按比例渲染。

内容的提问来源于stack exchange，提问作者Dominik Lenné