javascript - 在 JavaScript 中检索 CSS 属性然后修改它

Question

如何检索元素的 CSS 属性(例如 margin-left)，然后向其添加一些值，并使用更新后的值更改元素。

假设:

var element = document.getElementById("myElement");
var value = element.style.margin-left;

//How to do something like this?
var updatedValue = value + 10;
element.style.margin-left = updatedValue;

因为，style.margin-left 接受以像素为单位的值。如何检索当前值，然后向其添加内容，然后用相同的内容更新元素？谢谢。

Answer 1

只需使用parseInt 或parseFloat 将字符串转换为数字，然后重新应用px。

var value = parseInt(element.style.marginLeft);
element.style.marginLeft = (value + 10) + 'px';

注意:这将适用于其他单位，例如 em、% 等。

根据评论中的@ScottKaye，这里有一个使用 getComputedStyle 的示例，如果样式是通过样式表应用的，而不是在 DOM 元素的 style 属性中应用的:

var value = parseInt( window.getComputedStyle(element).marginLeft );
element.style.marginLeft = (value + 10) + 'px';