使用变量引用样式属性

Question

在我正在处理的项目中，我必须使用变量访问元素的样式属性。 例如：通常，要更改我们编写的元素的背景颜色：

var element = document.getElementById("element");
element.style.backgroundColor = "blue";

但是，如果我声明一个保存"backgroundColor"的变量，然后我想通过引用这个变量中的值来更改背景颜色的属性，那么怎么能做到。 我试过这些：

var property = "backgroundColor";
eval(element.style.property = "blue");

但它没有用。我不确定我能用任何其他方法来实现这一点。如果对此有任何解决方案，请回答。

Answer 1

使用[]表示法，例如

element.style[property] = 'blue';

见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties

Answer 2

这是因为它的触发错误，

Uncaught SyntaxError: Unexpected string 

document.getElementById("element").style --> Style Object [object CSSStyleDeclaration]

backgroundImage是style Object的属性。

要访问样式对象的属性，您可以使用[]

var property = "backgroundColor";
element.style[property] = 'blue'; // will set property of element.

Answer 3

您可以执行以下操作：

var property = "backgroundColor" ;
element.style[property] = "blue" ;

这将允许您访问background属性

Answer 4

有没有办法不仅使用样式对象，而且使用它的值来获取 var？类似于下面的代码。我知道这段代码不起作用，我写它只是为了更好地解释我在问什么。

var property = "backgroundColor = "blue" ";
element.style[property];