javascript - JavaScript中的.clientWidth/.width在img标签上不起作用

我想制作一个JavaScript滑块，我需要得到图像的宽度，这样我就可以对它们应用translateX，但是当我试图得到div的第一个图像的宽度时，它返回0。
我很确定错误在var size = carouselImg[0].clientWidth;行，但我不知道如何修复它。我把JavaScript代码放在HTML下面。

var carouselSlide = document.querySelector(".carousel-slide");
var carouselImg = document.querySelectorAll(".carousel-slide img");

let count = 1;

var size = carouselImg[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * count) + 'px)';

console.log(size);

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.carousel-container{
	width: 900px;
	border: 3px solid black;
	margin: auto;
}

.carousel-slide{
	display: flex;
	height: 300px;
}

<div class="carousel-container">
	<div class="carousel-slide">

		<img src="img4.png" id="lastImg" alt="">
		<img src="img1.png" alt="">
		<img src="img2.png" alt="">
		<img src="img3.png" alt="">
		<img src="img4.png" alt="">
		<img src="img1.png" id="firstImg" alt="">

	</div>
</div>

最佳答案

浏览器没有时间加载图像。clientWidth将为0，直到图像加载或显示为断开的图像。此外，设置alt=""将始终使断开的图像的clientWidth为0，即使浏览器确定图像已断开。（在问题片段中，图像的“alt属性是这样设置的。）所有这些都在Chrome 76中进行了测试。
下面的代码片段应该可以工作（在Chrome 76中测试）。我把你的脚本放到window.onload中，并给了图像alt属性。

window.onload = function() {
  var carouselSlide = document.querySelector(".carousel-slide");
  var carouselImg = document.querySelectorAll(".carousel-slide img");

  let count = 1;

  var size = carouselImg[0].clientWidth;

  carouselSlide.style.transform = 'translateX(' + (-size * count) + 'px)';

  console.log(size);
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.carousel-container{
	width: 900px;
	border: 3px solid black;
	margin: auto;
}

.carousel-slide{
	display: flex;
	height: 300px;
}

<div class="carousel-container">
	<div class="carousel-slide">

		<img src="img4.png" id="lastImg" alt="1">
		<img src="img1.png" alt="2">
		<img src="img2.png" alt="3">
		<img src="img3.png" alt="4">
		<img src="img4.png" alt="5">
		<img src="img1.png" id="firstImg" alt="6">

	</div>
</div>