如何在javascript中将变量传递给style属性？

如果这个问题用了不正确的术语，我很抱歉

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

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); 

我想这样做，但这是不可能的，有办法吗

在这一行：

var styleProp = [height,width,top];

我想你的意思是：

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

如果是这样：在JavaScript中，可以使用点符号和文字属性名称（

obj.foo

）或使用括号符号和字符串属性名称（

obj[“foo”]

）引用属性。当然，在后一种情况下，可以使用任何计算结果为字符串的表达式，包括变量引用

因此，在

styleChanger

中，可以使用括号表示法：

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

ele.style[styleProp] = ...

由于

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); 

使用括号表示法：

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

ele.style[styleProp] = ...

---

您可以改为使用对象：

 var box = document.getElementById("box");
 var styleProp = {"height": 100, "width": 100, "top": 500};

 for(var key in styleProp) {
    styleChanger(box, key, styleProp[key]);
 };  

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

---

就像@tymeJV和@T.J.Crowder告诉你的，你必须使用括号内的符号。 但是我在你的代码中发现了一些错误。不得将“top”一词用作变量名。这可能会在某些浏览器中导致错误。如果您在chrome中的“top”变量上使用console.log，它将按预期记录“Window”而不是“500”。另外，在“styleProp”变量中，应该使用引号，否则数组中的数字（来自变量）将不是字符串。因此，您的代码应该是这样的：

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); 

---

我只是想添加另一种方法来实现这一点，以及支持R3tep在对象中存储样式更改的答案：

让样式更改={
“#盒子”：{
“高度”：“100px”，
“宽度”：“100px”，
“顶部”：“500px”，
“fontFamily”：“继承”
}
}
让makeStyleChanges=（项，styleProps）=>{
for（让我们输入styleProps）{
item.style[key]=styleProps[key]；
}
}
for（让输入样式更改）{
let item=document.querySelector（el）；
如果（项目）{
makeStyleChanges（项，styleChanges[key]）；
}
}

嘿，谢谢你的评论，有没有理由比上面的答案更好？或者这只是做同样事情的另一种方式。我想要最有效的方法，因为我想这样做的目的是动画，如果这证明是更好的重用和速度等方面，那么它将是有趣的知道（更多作为一个OCD的我，使有效的代码）。@user3012749对我来说，一个对象更适合你的情况。因为在您的代码中，一侧有一个键，另一侧有一个值。例如，如果要添加“bottom”键，则需要添加变量“bottom”，在表中添加字符串“bottom”，并调用函数。对于对象，只需添加“底部”键及其值。关于速度，我不知道，对不起。。。