javascript - 如何将变量传递给 javascript 中的样式属性？

Question

如果问题的措词不正确，我深表歉意。

基本上我想通过传递一个变量来指定我想在函数中更改什么样式。

function styleChanger(ele, styleProp, x){
      ele.style.styleProp = x + "px";
}

var box = document.getElementById("box");
var height = 100;
var width = 100;
var top = 500;
var styleProp = [height,width,top];

styleChanger(box, styleProp[0], height);
styleChanger(box, styleProp[1], width);
styleChanger(box, styleProp[2], top); 

我想这样做但是不可能，有什么办法吗？

Answer 1

在这一行:

var styleProp = [height,width,top];

我想你的意思是:

var styleProp = ["height","width","top"];

如果是这样:在 JavaScript 中，您可以使用点分符号和文字 属性名称 (obj.foo)，或使用方括号符号和string 属性名称 (obj["foo"])。当然，在后一种情况下，您可以使用任何计算结果为字符串的表达式，包括变量引用。

因此在 styleChanger 中，您可以使用方括号表示法:

ele.style[styleProp] = x + "px";
//        ^------- Not the same `styleProp` as above; this one is
//                 the arg to the `styleChanger` function

由于 styleProp 的混淆，下面是一个更改了数组名称的完整示例:

function styleChanger(ele, styleProp, x){
      ele.style[styleProp] = x + "px";
      //       ^----------- bracketed notation
}

var box = document.getElementById("box");
var height = 100;
var width = 100;
var top = 500;
var styleNames = ["height","width","top"];

styleChanger(box, styleNames[0], height);
styleChanger(box, styleNames[1], width);
styleChanger(box, styleNames[2], top);