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

Question

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

Answer 1

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

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

注意:这会为其他单位,如工作em,%等等.

在评论中按@ScottKaye getComputedStyle,如果样式是通过样式表而不是在styleDOM元素的属性中应用的,则使用示例:

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