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

Question

我想为此制作一个 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>

标签： javascripthtmlcss

Answer 1

浏览器没有时间加载图像。clientWidth在图像加载或显示为损坏的图像之前，它将为 0 。此外，即使在浏览器确定图像损坏后，设置alt=""也会始终使损坏的图像为 0。clientWidth（在问题的片段中，图像的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>