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

Question

目前我无法理解可能非常简单的事情。

为了获得良好的 View ，下面是 html。

它有一个以 #sliderScroll 作为 ID 的 slider ，具有固定宽度和溢出滚动。

其中有多个 div.text-image-item，它们是宽度大小根据用户屏幕大小而变化的 block 。

<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>

通过按钮，我希望用户能够水平滚动。 我想要滚动的像素数量来表示 block 的宽度 (.text-image-item)，它会根据用户的屏幕尺寸而波动。

我正在尝试获取此 .text-image-item block 的宽度并将其用于 scrollLeft 函数。

到目前为止我得到了什么:

const buttonLeft = document.getElementById('scrollLeft');

buttonLeft.onclick = function () {
    var itemWidth = document.getElementsByClassName('text-image-item').offsetWidth;
    console.log(itemWidth);
    document.getElementById('sliderScroll').scrollLeft -= itemWidth;
};

如果我为 var itemWidth 设置一个固定的数字，它看起来就像工作。 但我想用 .text-image-item 类获取 div 的宽度。

我添加了 console.log 以查看 var 是否输出正确的数字，但它只返回 undefined。

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

Answer 1

document.getElementsByClassName('text-image-item') 返回一个 NodeList，在本例中包含 4 个节点。 NodeList 没有 offsetWidth。只有个别元素有宽度。

您需要选择其中一个节点并改用其宽度。您可以通过选择一个有效的索引来做到这一点:

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

关于NodeList的更多信息，查看MDN