JS DOM更新样式值意外行为

Question

我当时通过单击按钮来操作滑动的DOM元素，发现了一些意外的行为。我做了一个简单的复制here.

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

我一定想念什么！

提前感谢。

Answer 1

[第一次单击按钮时，currentLeft为空白，因为此时元素不具有style属性，并且执行了if(currentLeft)的else部分，该部分设置为相同的值。两个divs。

使用内联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');