如何添加JavaScript的CSS屬性？

如果點擊左右兩側的按鈕，我怎樣才能實現div（sellBody）向左或向右移動50px？如何添加JavaScript的CSS屬性？

使用下面的代碼框只能向左或向右移動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"; 
}

來源

2013-11-04 willi

我沒有看到任何與你提供的代碼點擊。還有更多嗎？或者你在HTML標記中的某處使用內聯'onclick'方法？ –

「使用下面的代碼框只移動50像素向左或向右一次。我知道爲什麼，但我不知道如何使它移動50像素到兩側的每一次點擊在任一按鈕上「。

你需要得到的電流值，並從中減去50：

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

目前的風格將在格式"50px"，所以使用parseFloat() function獲得數量而忽略了單位，以便你可以做你的減法，然後連接結果"px"。

來源

2013-11-04 20:39:43 nnnnnn

我不確定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'; 
}

來源

2013-11-04 20:41:10

如何添加JavaScript的CSS屬性？

回答

相關問題