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）或使用括号表示法和字符串<来引用属性/ em>属性名称（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);

Answer 2

使用括号表示法：

ele.style[styleProp] = ...

Answer 3

您可以改为使用对象：

 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";
 }

Answer 4

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

Answer 5

我只想添加另一种解决方法，并支持R3tep将样式更改存储在对象中的答案：

let styleChanges = {
  "#box": {
      "height": "100px",
      "width": "100px",
      "top": "500px",
      "fontFamily": "inherit"
  }
}

let makeStyleChanges = (item, styleProps) => {
  for(let key in styleProps) {
      item.style[key] = styleProps[key];
    }
}

for (let key in styleChanges){
  let item = document.querySelector(el);
  if(item) {
    makeStyleChanges(item, styleChanges[key]);
  }
}

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

5 个答案: