我怎樣才能增加價值沒有設定值

Question

如何添加一個值爲50而不是將左側的屬性設置爲50？

document.getElementById("myDiv").style.left = "50px"; 

我想爲我的圖片滑塊獲得流暢的動畫效果。

Answer 1

您可以解析該值併爲其添加一些值。

document.getElementById("myDiv").style.left = 
    (parseInt(document.getElementById("myDiv").style.left, 10) + 50) + 'px'; 

Answer 2

如果我理解正確的問題，那麼這是一個純粹的CSS溶液。

.slide { 
 
animation-name: slide; 
 
animation-iteration-count: 1; 
 
animation-duration: 5s; /* or: Xms */ 
 
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ \t 
 
margin-left:50px; 
 
} 
 
@keyframes slide { 
 
    0% { opacity: 0;position:relative;margin-left:-100% } 
 
    5% { opacity: 0;position:relative;margin-left:0 } 
 
    100% { opacity: 1;position:relative;margin-left:50px; } 
 
}

<div class="slide">this is a slowly sliding div</div>

您可以添加具有您要使用JavaScript上，例如點擊一個按鈕動作動畫效果的一類：在片段

document.getElementById("myButton").addEventListener('click' , function(e) { 
    e.preventDefault(); 
    document.getElementById("myDiv").classList.add("slide"); 
}); 

像下面

document.getElementById("myDiv").classList.add("slide");

.slide { 
 
animation-name: slide; 
 
animation-iteration-count: 1; 
 
animation-duration: 5s; /* or: Xms */ 
 
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ \t 
 
margin-left:50px; 
 
} 
 
@keyframes slide { 
 
    0% { opacity: 0;position:relative;margin-left:-100% } 
 
    5% { opacity: 0;position:relative;margin-left:0 } 
 
    100% { opacity: 1;position:relative;margin-left:50px; } 
 
}

<div id="myDiv">this is a slowly sliding div</div>