如何使用 javascript 添加 css 属性？ [复制]答案

【问题标题】：How do i add css attributes with javascript? [duplicate]如何使用 javascript 添加 css 属性？ [复制]
【发布时间】：2013-11-04 20:36:15
【问题描述】：

如果单击左右按钮，如何实现 div (sellBody) 向左或向右移动 50 像素？

使用以下代码，框仅向左或向右移动 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";
}

【问题讨论】：

我看不出与您提供的代码中的点击有任何关系。是否还有更多内容，或者您是否在 HTML 标记中的某处使用了内联 onclick 方法？

标签： javascript html css styles transition

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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';
}

【讨论】：