JavaScript中的.clientWidth/.width不适用于img标记_Javascript_Html_Css

JavaScript中的.clientWidth/.width不适用于img标记

javascript html css

JavaScript中的.clientWidth/.width不适用于img标记,javascript,html,css,Javascript,Html,Css,我想制作一个JavaScript滑块，我需要获得图像的宽度，这样我就可以对它们应用translateX，但是当我尝试获得div的第一个图像的宽度时，它返回0 我很确定错误在var size=carouselImg[0]中行，但我不知道如何修复它。我将JavaScript代码放在HTML下面 var carouselSlide=document.querySelector（“.carousel slide”）； var carouselImg=document.queryselectoral（“

我想制作一个JavaScript滑块，我需要获得图像的宽度，这样我就可以对它们应用

translateX

，但是当我尝试获得div的第一个图像的宽度时，它返回0

我很确定错误在

var size=carouselImg[0]中行，但我不知道如何修复它。我将JavaScript代码放在HTML下面

var carouselSlide=document.querySelector（“.carousel slide”）；
var carouselImg=document.queryselectoral（“.carousel-slide-img”）；
让计数=1；
var size=carouselImg[0]。客户端宽度；
carouselSlide.style.transform='translateX（+-size*count）+'px'；
控制台日志（大小）
*{
保证金：0；
填充：0；
框大小：边框框；
}
.转盘式集装箱{
宽度：900px；
边框：3倍纯黑；
保证金：自动；
}
.旋转滑梯{
显示器：flex；
高度：300px；
}
浏览器没有时间加载图像。clientWidth
将为0，直到图像加载或显示为断开图像。此外，设置alt=”“
将始终使损坏图像的clientWidth
为0，即使在浏览器确定图像已损坏之后也是如此。（在问题片段中，图像的
alt

属性就是这样设置的。）这一切都在Chrome76中进行了测试

下面的代码片段应该可以工作（在Chrome76中测试）。我将您的脚本放入

窗口。onload

并赋予图像

alt

属性

window.onload=function（）{
var carouselSlide=document.querySelector（“.carousel slide”）；
var carouselImg=document.queryselectoral（“.carousel-slide-img”）；
让计数=1；
var size=carouselImg[0]。客户端宽度；
carouselSlide.style.transform='translateX（+-size*count）+'px'；
控制台日志（大小）；
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
.转盘式集装箱{
宽度：900px；
边框：3倍纯黑；
保证金：自动；
}
.旋转滑梯{
显示器：flex；
高度：300px；
}

嘿，我也遇到了同样的问题，我通过更改HTML文件中Javascript文件链接的位置解决了这个问题，我首先加载CSS，然后像Javascript一样加载Javascript

<head>
<meta charset="utf-8">
<title>Slideshow</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer charset="utf-8"></script>


幻灯片

您是否在尝试获取图像宽度之前等待图像完成加载？如果在不等待的情况下获取宽度，则宽度将为

，因为图像尚未加载。请注意，

$（文档）.ready（…）

不会等待图像加载，但是

$（窗口）.load（…）

会。它对我有用