Question

我有几个固定的位置div，它们在距离窗口左边不同的距离处具有相同的类，并且当某个动作发生时，我想在每个div上增加/减少该距离相等的量（在此case，窗口调整大小）。我已经尝试使用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

您可能遇到的一个问题是，在检索当前的左侧或顶级属性时，它们将作为字符串返回，最后px为%。尝试在返回的值上运行parseInt()以获取数字，然后您可以添加到值。在重新分配时，请确保在适当时将“px”或“％”连接在一起。

Answer 2

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

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

这显然不是完整的代码，但你应该能够填补空白。您必须在页面加载时使用原始位置设置oldPosition变量，以便该函数第一次工作。

编辑：您还必须从x.style.property字符串中删除单位，以便您可以将值添加到其中

Answer 3

你可以使用一些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

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

3 个答案: