javascript - 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 addToLeft()  {  
    var left 
        = document.getElementById("show-sessions").clientLeft + 20;
    document.getElementById("show-sessions").style.Left = left + "px";

}

注意1：这改变了左边的位置，而不是marginleft。

注意2：返回值是 int 而不是 string。

Answer 4

您的变量 marginLeft 将保持 20，这就是它移动一次的原因。您是否可能没有尝试实现这样的目标：

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

Answer 5

您可以使用该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上的示例。

Answer 6

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