在JavaScript中检索CSS属性，然后对其进行修改

Retrieving CSS properties in JavaScript and then modifying it

本文关键字：修改 然后 JavaScript 检索 CSS 属性      更新时间：2023-09-26

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

假设：

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接受以像素为单位的值。如何检索当前值，然后向其中添加一些内容，然后用相同的内容更新元素？非常感谢。

只需使用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';
相关文章：