使用JavaScript來增加頂部/左側/底部/右側的值

我正在嘗試增加一個元素的位置，例如x像素。以下是我試過到目前爲止：使用JavaScript來增加頂部/左側/底部/右側的值

var top = document.getElementById("something").style.top; 
top = top + "300px"

我知道這是行不通的，但我不知道是否有可能增加這樣一個位置值。

來源

2012-08-24 day0

爲什麼這個downvoted？這是一個完全有效的問題。 – Brad

因爲style.top是一個字符串，其末尾帶有單位，如"300px"只有在將數字部分轉換爲實際數字時，纔可以對其進行數學運算。

假設你有一個定位的元素（這樣設置top值會做一些），你已經有了一個top風格直接設置在元素上，而不是通過CSS設置（因此讓obj.style.top實際上會得到你的東西），你可以

var obj = document.getElementById("something"); 
var topVal = parseInt(obj.style.top, 10); 
obj.style.top = (topVal + 300) + "px";

工作例如：通過解析數出樣式值這樣的做http://jsfiddle.net/jfriend00/pt46X/

來源

2012-08-24 19:08:27 jfriend00

我輸入了一個小代碼：http://jsfiddle.net/wLf35/雖然我似乎無法找到錯誤。 – day0

@ day0 - 正如我在我的回答中所說的，'obj.style.top'不會檢索CSS中設置的值。如果您的樣式是通過CSS設置的，您將需要使用跨瀏覽器版本的'window.getComputedStyle（）'。 'obj.style.top'只檢索直接在對象上設置的樣式值（不通過CSS）。在jsFiddle中，您還必須將代碼設置爲head或body，以使您的函數處於全局範圍內，並且可以按照您調用它們的方式進行訪問。看到這裏：http://jsfiddle.net/jfriend00/CG68f/ – jfriend00

啊，這太棒了！非常感謝你。我沒有在任何地方遇到'.getComputedStyle（）'。再次感謝！ – day0

，因爲，例如，如果top過的200px值就會不正常工作，它會成爲"200px300px"。試試這個：

var elem = document.getElementById("something"); 
elem.style.top = parseInt(elem.style.top, 10) + 300 + "px"

Demo WEEEE!!!!

來源

2012-08-24 19:08:46

讓它停下來！ – BNL

使用JavaScript來增加頂部/左側/底部/右側的值

回答

相關問題