Select css property by JS variable like elem.style.somestylingproperty

Question

Thank you for taking some time and reading my little problem! So what I am trying to do is this, I am currently making a JSON object that holds all my styling for certain elements. The reason I am putting all my styling in the JSON file is that I want it to be easy to implement new custom "meters" with each having their own unique styling.

Here you can see my JSON Obj and the javascript trying to set the keys from the JSON Obj.

Jason Obj: "meters": [{ "jackpot": { "position": "fixed", "width": "400px", "heigt": "250px", "color": "white", } }, { "someothermeter": { "test": "fakeval" } }],

Javascript trying to set the CSS properties + values:

//returns the newly created meter
  meter: function(options) {
     console.log("----------new elem----------");
     var elem = document.createElement("div");

     //Set styling options.
     for (var mtr in options) {
        if (options.hasOwnProperty(mtr)) {
           for (var name in options[mtr]) {
              if (options[mtr].hasOwnProperty(name)) {
                 var styleProperty = name.toString();
                 var styleValue = options[mtr][name].toString();

                 elem.style.styleProperty = styleValue;

                 console.log(styleProperty);
                 console.log(styleValue);
              }
           }
        }
     }
     return elem;
  },
  textbox: function() {

  },

Thanks for reading, I hope you can help!

score 0 · Accepted Answer · answered Feb 15 '18 at 23:53

If you want to add style properties programmatically use brackets:

elem.style[styleProperty] = styleValue; <- i.e: styleValue = 'fixed'
           ^
           |_ Variable styleProperty, i.e: styleProperty = 'position'

Snippet to illustrate

let position = 'position';
document.getElementById('div').style[position] = 'fixed'
console.log(document.getElementById('div').style.position);

<div id='div'></div>

Select css property by JS variable like elem.style.somestylingproperty

1 Answers1