javascript - 添加 100px 到当前 marginleft onclick

Question

我想在每次单击按钮时添加 100px margin-left 。但我真的不知道该怎么做。这就是我想出的：

document.querySelectorAll('#test-button').forEach(el => el.addEventListener('click', function() {
 var marginleft = document.querySelector('.usp-item').style.marginLeft;
 marginleft += 100px;
}))

有人知道该怎么做吗？

标签： javascript

Answer 1

您需要设置marginLeft + 'px'为element.style.marginLeft.

document.querySelector('#test-button').addEventListener('click', function() {
  const item = document.querySelector('.usp-item');
  const marginLeft = parseInt(item.style.marginLeft.replace('px', '')) || 0;
  item.style.marginLeft = marginLeft + 100 + 'px';
});

.usp-item {
  background: red;
  width: 100px;
  height: 100px;
}

<div class="usp-item"></div>

<button id="test-button">test</button>