直接访问元素clientWidth与通过HTMLCollection查看返回值不一致问题

问题原因 #

这个现象是图片资源加载时序和浏览器console.log的惰性求值特性共同作用导致的，具体逻辑如下：

• 脚本执行时图片资源尚未加载完成：你把脚本放在DOM结构之后，浏览器解析完HTML标签生成DOM节点时，只是创建了img元素节点，对应的图片文件还没有完成下载、解码和渲染，此时读取clientWidth只能拿到0或者浏览器默认的图片占位尺寸，就是你直接打印单个属性时拿到的错误值。
• 打印整个DOM集合时显示正确值，是因为浏览器的console.log打印引用类型数据时，不会立即快照所有属性值，只会保存对象的引用。当你手动在控制台展开集合查看某个元素的clientWidth属性时，浏览器才会实时读取该属性的当前值，这时候图片通常已经加载完成，所以你看到的是正确的渲染后尺寸。

解决方案 #

你可以任选以下一种方案解决：

1. 等页面所有资源加载完成后再执行初始化逻辑，把代码放到window.onload回调中：

<script>
window.onload = function() {
    const slidesWrapper = document.querySelector('.carousel__item');
    const slides = document.querySelectorAll('.carousel__item img');
    const size = slides[0].clientWidth;
    let counter = 1;
    
    slidesWrapper.style.transform = `translateX(${(-size * counter)}px)`;
    console.log(`slides[0].clientWidth is ${slides[0].clientWidth}`);
}
</script>

2. 提前用CSS给轮播图片指定固定宽高，不需要等待图片加载就能拿到正确的尺寸值：

.carousel__item img {
  width: 100%;
  height: 400px; /* 换成你实际需要的高度，也可以用aspect-ratio指定宽高比 */
  object-fit: cover;
}

3. 监听所有图片的load事件，全部加载完成后再执行轮播初始化逻辑，适合图片尺寸不固定的场景。

内容的提问来源于stack exchange，提问作者PHilgarth