选不到 img 中的属性

Question

我想读取到数据后， 再输出到 HTML 中
然后， 我需要获取到图片的宽度， 是想用offsetWidth 来获取的， 但是我取不到 offsetWidth...

在 102 行那里的 console.log 打印出来的数组 点开后是可以看到诸如 offsetWidth 之类的属性的
但是 103 行 那样就不行了， 返回的都是 0

附上代码：

  <div id="testUl">

  </div>
  <script type="text/javascript">

    var model_taskbar = {
      files: [
        { 'id': '1',  'name': '文件管理器', 'aHrefAttr': 'https://www.baidu.com', 'imgSrcAttr': '1.png', 'inTaskbar': true },
        { 'id': '2',  'name': '文件管理器', 'aHrefAttr': '#', 'imgSrcAttr': 'testImg.jpg', 'inTaskbar': true },
        { 'id': '3',  'name': '文件管理器', 'aHrefAttr': '#', 'imgSrcAttr': 'testImg.jpg', 'inTaskbar': true }
      ]
    };
    var model_taskbar_length = model_taskbar.files.length
    var testUl = document.getElementById('testUl')
    var testUlImg = testUl.getElementsByTagName('img')
    
    var taskbar_li_template = function (a_href_attr, img_src_attr) {
      return  '<li><a href="'+ a_href_attr +'"><img src="' + img_src_attr + '"  /></a></li>'
    }

    for (let i = 0; i < model_taskbar_length; i++) {
      testUl.innerHTML += taskbar_li_template(model_taskbar.files[i].aHrefAttr, model_taskbar.files[i].imgSrcAttr)
      console.log(testUlImg) // 打印出来是数组， 里面可以看到 offsetWidth 等等很多属性
      console.log(testUlImg[i].clientWidth) // 这样就没有， 选出来都是 0 
    }
    console.log(testUl.innerHTML)
</script>

我后来通过添加一个定时器（setTimeout(function(){}, 100)）隔一下就可以取到....
求帮助， 怎样不通过定时器也能取到， 以及原理？

Answer 1

确保img加载完后再获取他的高度和宽度

Answer 2

image.onload = function(){
    //你的代码
}

Answer 3

感谢各位的回答， 我这个给的例子并没有完全还原我的问题... 不过各位也让我找到了一些思路， 谢谢了

Answer 4

img.onload 后通过getComputedStyle获取试试：

img.onload = function(){
    var width = window.getComputedStyle(img, null)['width'];
    console.log(width);
}

具体见MDN文档：getComputedStyle