javascript - 如何通过 JS 变量的值来增加 CSS 值？

Question

我有几个具有相同类别的固定位置 div，距离窗口左边缘的距离不同，我想在发生特定操作时在每个 div 上增加/减少该距离(在此例，正在调整窗口大小)。我试过使用 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(" "));
        }

Answer 1

您介意分享为什么百分比不起作用吗？如果您希望页面在调整窗口大小时正确缩放，通常这就是我推荐的方法。我想如果你真的想要，你可以这样做:

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

这显然不是完整的代码，但您应该能够填补空白。您必须在页面加载时将 oldPosition 变量设置为原始位置，以便该函数首次运行。

编辑:您还必须从 x.style.property 字符串中删除单位，以便您能够向其添加值