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";

}

note1：这会改变左侧位置，而不是marginleft。

note2：返回值为int而不是string。

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上的示例。

javascript增量（超过++）样式属性

6 个答案: