JS DOM 更新样式值意外行为

Question

我正在通过按钮单击来滑动DOM元素，并发现了一些意想不到的行为。我在这里做了一个简单的复制。

单击时，我使用document.querySelectorAll选择具有相关类的所有项目，并迭代它们。 我预计每次迭代都会增加每个元素的 left 属性的值，但它似乎将它们设置为相等。

我一定错过了什么！

提前谢谢。

Answer 1

当您第一次单击按钮时，currentLeft为空白，因为此时您的元素没有style属性，并且执行if(currentLeft)的 else 部分，这将两个div 的左值设置为相同的值。

使用内联 html 样式而不是 css 设置左值，以便代码正常工作

<div class="image-wrapper" id="foo" style="left: 0"></div>
<div class="image-wrapper" id="bar" style="left:-500px"></div>

或者，您可以将样式保留在 css 中，但使用类似getComputedStyle

let currentLeft = window.getComputedStyle(element, null).getPropertyValue('left');