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

Question

I'm sorry if the question is phrased with the incorrect terminology.

Basically I want to specify what style I want to change in a function by passing it a variable.

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

I want to do this but its not possible, is there a way?

Answer 1

On this line:

var styleProp = [height,width,top];

I think you meant:

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

If so: In JavaScript, you can refer to a property either using dotted notation and a literal property name ( obj.foo ), or using bracketed notation and a string property name ( obj["foo"] ). In the latter case, of course, you can use any expression that evaluates to a string, including a variable reference.

So within styleChanger , you can use bracketed notation:

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

Because of the styleProp confusion, here's a complete example with the name of the array changed:

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

You can use an object instead :

 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

Like @tymeJV and @TJCrowder told you, you have to use bracketed notation. But i've found some bugs in your code. You shall not use the word "top" as a variable name. This may cause erros in some browsers. If you use console.log over your "top" variable in chrome, it will log "Window" not "500" as expected. Also, in the "styleProp" variable, you should use quotation marks, or else, your array will have numbers inside (from your vars) not strings. So, your code should be like that:

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

I just wanted to add another way of approaching this, as well as support R3tep's answer of storing the style changes in an object:

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