javascript - CSS Styling from JSON - Stack Overflow

admin管理员组

文章数量:1279187

I am creating an app in which you can apply custom css to html templates. The custom css is drawn from a .json file, I then parse it, transmute it into css and then intstantiate a custom <style>.

I think I am very close to having this working as intended, the only issue is that I can't quite work out how to remove the , in between a selectors properties. i.e. in the example below... #textContainer {border:blue solid 2px;,background-color:#ff0;} the ma right before background-color.

note: in the example below, the styles object represents the external .json file.

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>

I am creating an app in which you can apply custom css to html templates. The custom css is drawn from a .json file, I then parse it, transmute it into css and then intstantiate a custom <style>.

I think I am very close to having this working as intended, the only issue is that I can't quite work out how to remove the , in between a selectors properties. i.e. in the example below... #textContainer {border:blue solid 2px;,background-color:#ff0;} the ma right before background-color.

note: in the example below, the styles object represents the external .json file.

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>

• javascript
• html
• css
• json

Share Improve this question Follow asked Feb 21, 2017 at 4:16 ZzeZze 18.8k1414 gold badges9494 silver badges125125 bronze badges 1

• @JaromandaX this became immediately apparent after I saw the answer from Robby.. Very valid and unnecessary - cheers. – Zze Commented Feb 21, 2017 at 4:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This should do it:

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>

本文标签： javascriptCSS Styling from JSONStack Overflow