javascript - 使用变量引用样式属性

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

您可以执行以下操作：

var property = "backgroundColor" ;

element.style[property] = "blue" ;

这将允许您访问background属性

Answer 3

这是因为它的发射甜蜜错误，

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 4

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

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