如何通過JS變量的值增加CSS值？

我有幾個固定的位置div與窗口的左邊緣距離不同，我想在某個動作發生時在每個div上增加或減少相同的距離（在這種情況下，窗口正在調整大小）。我試着用CSS和百分比而不是像素來定位它們，但它並不完成這項工作。如何通過JS變量的值增加CSS值？

有沒有辦法將每個div的位置存儲在一個數組中，然後添加/減去給定數量的像素？

這是我到目前爲止已經試過 - 我仍然得到我的周圍JS頭，這可能是真的不好就我所知，但這裏有雲：

roomObjects = $('.object-pos'); 

var objectCount = 0; 

for (var objectCount = 0; objectCount < 10; objectCount++;) { 
      roomObjects = rooomObjects[objectCount]; 
      console.log(roomObjects.css("background-position").split(" ")); 
     }

來源

2012-05-14 sowasred2012

你介意分享百分比爲什麼不工作呢？通常這是我會建議，如果你想頁面調整窗口大小正確。 –

當然 - 除非窗口小於該背景圖像的大小，否則我將div設置爲背景圖像，該背景圖像設置爲'background-size：cover'和'background-position：center top'，在這種情況下，我的js禁用背景大小的樣式。我需要divs與背景圖像保持一致，在這些背景圖像中我定位了它們，以便如果窗口小於bg圖像，則div會隨之移動。 – sowasred2012

你可以添加另一個「內容」div的寬度和高度設置爲窗口大小，然後讓有問題的div駐留在其中。這樣，包含div始終是整個頁面的大小，然後背景大小並不重要。你的div會隨着包含的比例進行擴展。（我希望我理解這個問題的權利） –

你介意分享爲什麼百分比不起作用嗎？通常這是我會建議，如果你想頁面調整窗口大小正確。我想如果你真的想你可以這樣做：

$(window).resize(function() { 
    $('#whateverdiv').style.whateverproperty = $('#whateverdiv').style.whateverproperty.toString() + (newPosition - oldPosition); 
    oldPosition = newPosition; 
}

這顯然是不完整的代碼，但你應該能夠填補空白。您必須在頁面加載時使用原始位置設置oldPosition變量，以便函數首次運行。

編輯：你也有從x.style.property串脫光單位，這樣你就可以值添加到它

來源

2012-05-14 16:51:21

感謝您的幫助 - 我知道我的問題有點模糊，這是因爲我不完全確定如何闡明在這種情況下我是什麼樣的人，但是這個幫助:) – sowasred2012

一個問題，你很可能是面臨的是當檢索當前的左邊或頂部屬性時，它們以字符串形式返回，最後px爲%。嘗試在返回的值上運行parseInt()以獲取數字，那麼您可能會添加到值。只要確保在重新分配時，在適當的時候將「px」或「％」連接在一起即可。

來源

2012-05-14 16:42:35

您可以使用一點的jQuery：

var el = $("#id"); 
var top = el.css("top"); 
el.css("top", top * 1.2); // increase top by 20%

節省出渣周圍的DOM

如果要相對定位的東西，這可能是有用的：http://docs.jquery.com/UI/Position

來源

2012-05-14 17:00:21

如何通過JS變量的值增加CSS值？

回答

相關問題