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

我在上移动div标签时遇到了一些问题。我可以让它移动一次，但是我不知道如何获得新变量并重新添加。JavaScript增量（超过++）样式属性

NO jQuery，请和我真的不担心此刻

function addToMargin() { 

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

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

我试着设置一个全局变量来存储数量，但再后来NaN

任何帮助，跨平台的不胜感激...

来源

2013-03-05 hobbywebsite

我希望你明白，边距将是20而不是30，因为javascript canot读取这样的CSS样式。 – kingdomcreation 2013-03-05 19:04:32

的golobal瓦里能够事情是不是一个坏主意，尝试一些类似这样的：

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

我还可能提供初始保证金为内嵌式的，以防万一......

来源

2013-03-05 19:05:31

谢谢Gabor这对我来说可能是因为我明白了，我一直无法得到每个人都喜欢为我工作的答案。 – hobbywebsite 2013-03-05 19:27:43

它是一个有效和简单的答案，但我不认为它是一个好主意，只为一个函数设置一个全局变量。 http://www.javascripttoolbox.com/bestpractices/ – Toping 2013-03-05 19:31:36

我切换到另一个按钮去其他方式，所以它的两个功能^^ – hobbywebsite 2013-03-05 19:50:13

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

来源

2013-03-05 19:03:13

不要忘记解析浮动的风格，因为据我所知，它回来了与px钉在那里。 – 2013-03-05 19:03:37

@hilton：'parseInt'将处理'px'。 – 2013-03-05 19:04:36

@ Diodeus你的“答案”是一个提示，而不是实际的解决方案。我没有downvoted btw – Toping 2013-03-05 19:05:15

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

来源

2013-03-05 19:04:32 karaxuna

不应该是最后一行的'element.style.marginLeft'吗？ – 2013-03-05 19:06:35

+1，但'.replace（）'不是真的需要。当然不会伤害。 – 2013-03-05 19:06:35

@GaborMagyar是的，你是对的，我错过了那个错误:) – karaxuna 2013-03-05 19:07:47

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

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

}

注1：此更改的左侧位置，而不是marginleft。

注2：返回值为int而不是字符串。

来源

2013-03-05 19:10:25 Toping

您的变量marginLeft将保持为20，这就是它移动一次的原因。你是不是试图实现这样的事情：

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

来源

2013-03-05 19:11:11 JorgeJ

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

来源

2013-03-05 19:41:08 Corey

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

回答

相关问题