Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这应该这样做：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

来自JSON的CSS样式

1 个答案: