如何使用 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";

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

Answer 2

我不确定 transition CSS 属性，但您应该将 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';
}