javascript增量（大于++）样式属性

Question

我在将div标签与onclick移到一起时遇到了一些麻烦。 我可以让它移动一次，但是后来我不知道如何获取新变量并再次添加到它。

请不要使用jQuery，我现在并不真正担心跨平台

function addToMargin()  {

        var marginleft = 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

#show-sessions  {
        margin-left:10px;
        width:200px;
        overflow:hidden;
}

我尝试设置一个全局变量来存储数字，但后来它变成了NaN

任何帮助表示赞赏...

Answer 1

function addToMargin()  {  
        var marginleft 
            = parseInt(document.getElementById("show-sessions").style.marginLeft) + 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

Answer 2

全局变量并不是一个坏主意，请尝试如下操作：

var margin = 20;
function addToMargin()  {
        margin ++; //or += value
        document.getElementById("show-sessions").style.marginLeft = margin + "px";
}

我还可能以行内样式提供初始边距，以防万一...

Answer 3

function addToMargin(value)  {
    var element = document.getElementById("show-sessions");
    var marginleft = parseInt(element.style.marginLeft.replace('px', ''));
    element.style.marginLeft = (marginleft + value) + "px";
}

Answer 4

我的贡献，以供将来参考和研究：

function addToLeft()  {  
    var left 
        = document.getElementById("show-sessions").clientLeft + 20;
    document.getElementById("show-sessions").style.Left = left + "px";

}

注意1：这会更改左侧位置，而不是marginleft。

注意2：返回值是整数而不是字符串。

Answer 5

您的可变marginLeft将保持20，这就是为什么它只移动一次的原因。 您是否不打算实现以下目标：

var marginLeft = 20;
var tot = document.getElementById("show-sessions").style.marginLeft;
document.getElementById("show-sessions").style.marginLeft = (tot + marginLeft) + "px"

Answer 6

您可以使用window.getComputedStyle()方法。 也许做一个可重用的函数以获得更好的抽象。 就像是：

function move(el, val) {
    var style = window.getComputedStyle(el);
    el.style.marginLeft = parseInt(style.marginLeft) + val + "px";
}

window.onload = function () {
    document.getElementById("show-sessions").onclick = function (e) {
        move(this, 20);
    };
};

JSFiddle上的示例 。