Javascript 纯js。获取元素的宽度并在滚动中使用它

目前，我无法让我的头缠绕在一些可能非常简单的事情上

为了获得良好的视图，下面是html

它有一个带有

#sliderScroll

作为ID的滑块，具有固定的宽度和溢出滚动

其中有多个

div.text-image-item

，这些块的宽度大小根据用户的屏幕大小而波动

<div id="sliderScroll" class="slider">
   <div class="text-image-item"> Content block 1 </div>
   <div class="text-image-item"> Content block 2 </div>
   <div class="text-image-item"> Content block 3 </div>
   <div class="text-image-item"> Content block 4 </div>
</div>

如果我为

var itemWidth

设置了一个固定的数字，它看起来好像在工作。 但是我想通过类

获取div的宽度。text image item

我添加了

console.log

，以查看var是否输出了正确的数字，但它只返回

undefined

---

有人能给我指出正确的方向吗？我在这里挠头，因为我不太确定哪里出了问题

document.getElementsByClassName（'text-image-item'）

返回一个

节点列表，在本例中包含4个节点。
NodeList
没有
offsetWidth
。只有单个元素具有宽度

您将需要选择一个节点并使用其宽度。您可以通过选择一个有效的索引来执行此操作：

document.getElementsByClassName('text-image-item')[0].offsetWidth

有关
NodeList
的详细信息，请查看
文档。getElemenetsByClassName（）
返回一个
NodeList
，但您可以对其执行操作，因为它是一个元素。另外，看起来您只需要类
.text image item
的一个元素，因此使用like
document.querySelector（'.text image item'）
就足够了，因为它将返回具有该类名的第一个元素

尝试：


const buttonLeft=document.getElementById（'scrollLeft'）；
buttonLeft.onclick=函数（）{
让itemWidth=document.querySelector（'.text-image-item'）.offsetWidth；
};
向左滚动
内容块1
内容块2
内容块3
内容块4
可以将滚动条中的元素上移到当前元素，并将其宽度相加。然后您可以使用它来设置滚动宽度。这样，您可以拥有任意宽度的元素，并且仍然可以访问所需的元素


constsumbyfunction=f=>（p，c）=>p+f（c）；
const getOffsetWidth=element=>element.offsetWidth；
常量querySelector=元素=>
选择器=>
Array.from（element.queryselectoral（选择器））
const SumOffsetWidth=sumByFunction（getOffsetWidth）
常量scrollNext=（元素）=>{
让currentScroll=0；
常量选择器=查询选择器（元素）；
return（）=>{
currentScroll++；
常量scrollTarget=选择器（'.text-image项'）
.slice（0，当前滚动）
.减少（集总网络宽度，0）
element.scrollLeft=滚动目标；
}
};
文件
.getElementById（'scroller'）
.onclick=scrollNext（document.getElementById（'sliderScroll'）
#滑块滚动{
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
}
.文本图像项{
边框：实心2倍rgba（20,20,30,0.4）；
显示：内联块；
宽度：70vw；
}
#卷轴{
位置：固定；
左：0；
顶部：20vh；
}

内容块1
内容块2
内容块3
内容块4
滚动下一步
文档。getElementsByClassName（'text-image-item'）
返回一个
节点列表
，在本例中包含4个节点。
NodeList
没有
offsetWidth
。只有单个元素有宽度。谢谢艾米。我不知道这对多个元素不起作用，即使它们都具有相同的宽度。它们不能保证具有相同的宽度。但是，如果您认为情况确实如此，只需选择其中一个元素并使用其宽度。就可以了。
document.getElementsByClassName('text-image-item')[0].offsetWidth