添加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)'; 
}