添加CSS屬性值，以現有價值與JavaScript

Question

我想通過點擊按鈕

<input type="button" value=">" onclick="pomakDesno()" class="button"/> 

改變UL與JS

<ul id="navigation" style="-webkit-transform: translateX(0px);"></ul> 

翻譯，但是當我使用的onclick改變，我想通過每次點擊來增加它，換句話說，爲已有的價值增加一些價值。我有這個代碼。我究竟做錯了什麼？

<script> 
     function pomakDesno(){ 
     var mvalue=document.getElementById('navigation').style.WebkitTransform; 
     var tvalue=111; 
     var zvalue= mvalue+tvalue; 
     document.getElementById('navigation').style.WebkitTransform='translateX(' + zvalue + 'px)';} 

    </script> 

Answer 1

您需要從原始樣式中提取translateX(...)中的數字。

function pomakDesno(){ 
    var mvalue=parseInt(document.getElementById('navigation').style.WebkitTransform; 
    var translateX = parseInt(mvalue.match(/translateX\((\d?)px\)/)[1], 10); 
    var tvalue=111; 
    var zvalue= mvalue+tvalue; 
    document.getElementById('navigation').style.WebkitTransform='translateX(' + zvalue + 'px)'; 
}