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增量（超過++）樣式屬性

回答

相關問題