javascript - JavaScript 中的 .clientWidth/.width 不适用于 img 标签

Question

我想为此制作一个 JavaScript slider ，我需要获取图像的宽度，以便我可以在它们上应用 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>

Answer 1

浏览器没有时间加载图像。 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>