javascript - 如何使用 javascript 添加 css 属性？

Question

如果单击左右按钮，我如何实现 div（sellBody）向左或向右移动 50px？

使用以下代码，该框仅向左或向右移动 50px 一次。我知道为什么，但我不知道每次单击任一按钮时如何使其向任一侧移动 50px。

function slideLeft(sellBody) {

  var slideLeft = document.getElementById("sellBody");
    slideLeft.style.transition = "left 1.0s linear 0s";
    slideLeft.style.left = "-50px";
}

function slideRight(sellBody) {

  var slideRight = document.getElementById("sellBody");
    slideRight.style.transition = "right 1.0s linear 0s";
    slideRight.style.right = "-50px";
}

Answer 1

“使用以下代码，该框仅向左或向右移动 50px 一次。我知道为什么，但我不知道如何让它在每次单击任一按钮时向任一侧移动 50px。”

您需要获取当前值并从中减去 50：

var currentLeft = parseFloat(slideLeft.style.left);
slideLeft.style.left = (currentLeft - 50) + "px";

当前样式将采用 format "50px"，因此使用parseFloat()函数获取数字并忽略单位，以便您可以进行减法，然后连接"px"到结果。

Answer 2

我不确定transitionCSS 属性，但您应该将 CSS 属性解析为整数，进行数学运算，然后重新设置属性。

对于这种情况，您根本不需要 CSS right。
您只需要更改left属性。

向左移动，减去left
向右移动，加上left

---

function slideLeft(sellBody) {
  var slideLeft = document.getElementById("sellBody");
  slideLeft.style.left = Math.floor( parseInt(slideLeft.style.left, 10) - 50 ) + 'px';
}

function slideRight(sellBody) {
  var slideRight = document.getElementById("sellBody");
  slideLeft.style.left = Math.floor( parseInt(slideLeft.style.left, 10) + 50 ) + 'px';
}