如何按 JS 变量的值增加 CSS 值

How to increase a CSS value by the value of a JS variable?

本文关键字：增加 CSS 变量 何按 JS      更新时间：2023-09-26

我有几个固定位置的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(" "));
        }

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

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

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

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

您可能面临的一个问题是，在检索当前的左侧或顶部属性时，它们以字符串形式返回，末尾px %。尝试对返回的值运行parseInt()以获取一个数字，然后您很可能能够添加到值中。只要确保在重新分配时，在末尾适当地连接"px"或"%"。

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

相关文章：