通过 JS 变量选择 css 属性，如 elem.style.somestylingproperty [重复]答案

【问题标题】：Select css property by JS variable like elem.style.somestylingproperty [duplicate]通过 JS 变量选择 css 属性，如 elem.style.somestylingproperty [重复]
【发布时间】：2018-02-15 23:43:00
【问题描述】：

感谢您花时间阅读我的小问题！所以我想做的是这个，我目前正在制作一个 JSON 对象，其中包含我对某些元素的所有样式。我将所有样式都放在 JSON 文件中的原因是我希望能够轻松实现新的自定义“仪表”，每个仪表都有自己独特的样式。

在这里你可以看到我的 JSON Obj 和试图从 JSON Obj 设置键的 javascript。

杰森对象： "meters": [{ "jackpot": { "position": "fixed", "width": "400px", "heigt": "250px", "color": "white", } }, { "someothermeter": { "test": "fakeval" } }],

Javascript 试图设置 CSS 属性 + 值：

//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() {

  },

感谢阅读，希望对你有所帮助！

【问题讨论】：

有什么问题？

标签： javascript jquery html css json

【解决方案1】：

如果您想以编程方式添加样式属性，请使用括号：

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

片段说明

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

&lt;div id='div'&gt;&lt;/div&gt;

【讨论】：