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() function获取数字并忽略单位，以便您可以进行减法，然后将"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';
}

如何使用javascript添加css属性？

2 个答案: