来自 JSON 的 CSS 样式答案

【问题标题】：CSS Styling from JSON来自 JSON 的 CSS 样式
【发布时间】：2017-07-10 13:26:31
【问题描述】：

我正在创建一个应用程序，您可以在其中将自定义 css 应用于 html 模板。自定义 css 是从 .json 文件中提取的，然后我对其进行解析，将其转换为 css，然后实例化自定义 <style>。

我认为我非常接近按预期工作，唯一的问题是我无法完全弄清楚如何删除选择器属性之间的,。即在下面的示例中...#textContainer {border:blue solid 2px;,background-color:#ff0;} background-color 之前的逗号。

注意：在下面的例子中，styles object 代表外部的.json 文件。

var styles = {
  "#textContainer": {
    "border": "blue solid 2px;",
    "background-color": "#ff0;"
  },
  "#textContainer > button": {
    "color": "#f00"
  }
};


var newStyle = document.createElement('style');
newStyle.type = "text/css";

newStyle.appendChild(document.createTextNode(getCSS()));
document.querySelector("#textContainer").appendChild(newStyle);

function getCSS() {
  var css = [];
  for (let selector in styles) {
    console.log(">> Selector >> ", selector, JSON.stringify(styles[selector]));
    var nest = [];
    for (let prop in styles[selector]) {
      nest.push(prop + ":" + JSON.stringify(styles[selector][prop]));
    }
    css.push(selector + " " + JSON.stringify(styles[selector]));
  }

  var cssStr = css.join("\n");
  cssStr = cssStr.replace(/["]/g, "");
  console.log("-------------------------------------------------");
  console.log(cssStr);
  return cssStr;
}

<div id="textContainer" class="col-xs-offset-8 col-xs-4">
  <button type="button" class="btn btn-default btn-lg">Hello</button>
</div>

【问题讨论】：

@JaromandaX 在我看到 Robby 的回答后，这一点立即变得明显。非常有效和不必要 - 干杯。

标签： javascript html css json

【解决方案1】：

应该这样做：

var styles = {
  "#textContainer": {
    "border": "blue solid 2px;",
    "background-color": "#ff0;"
  },
  "#textContainer > button": {
    "color": "#f00"
  }
};


var newStyle = document.createElement('style');
newStyle.type = "text/css";
newStyle.appendChild(document.createTextNode(getCSS()));

document.querySelector("#textContainer").appendChild(newStyle);

function getCSS() {
  var css = [];
  for (let selector in styles) {
    let style = selector + " {";
    
    for (let prop in styles[selector]) {
      style += prop + ":" + styles[selector][prop];
    }
    
    style += "}";
    
    css.push(style);
  }
  
  return css.join("\n");
}

<div id="textContainer" class="col-xs-offset-8 col-xs-4">
  <button type="button" class="btn btn-default btn-lg">Hello</button>
</div>

【讨论】：

感谢您的帮助。