使用javascript将css属性值添加到现有值

Question

我正在尝试用JS改变ul翻译

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

点击按钮

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

但是当我使用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)';
}