get css from <style> as text for output

Question

How can I grab entire css from <style id="myId" type="text/css"> to push it into a JSON file?

I am adding dynamically css to <style>, so in my html the style is empty.

Tried with $('#myId').text(), $('#myId').html() with no luck.

I need for this type of output:

function addRule(selector, rules) {
      var stylesheet = document.getElementById('myId');
      if (stylesheet) {
        stylesheet = stylesheet.sheet;
        if (stylesheet.addRule) {
          for (var i = 0; i < selector.length; ++i) {
            stylesheet.addRule(selector[i], rules);
          }
        } else if (stylesheet.insertRule) {
          stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
        }
      }
}
function pushToJson(){
  item {}
  dataCSS = []
  item ["myCSS"] = '?????'; 
  // here I need the css 
  // eg: "h1 {margin:0;} .title {padding:10px 0;}"
  dataCSS.push(item);
}
addRule(['.title, h2'], 'color:red;');

Any help?

wasn't sure until now, that if you add dynamic css into style, you can't grab it with .html(), or I am wrong? — Adrian
– Adrian, Commented Feb 21, 2017 at 10:56
Exactly how are you "adding dynamically" css to <style>? — fdomn-m
– fdomn-m, Commented Feb 21, 2017 at 10:56
Use the equivalent get property stylesheet.cssRules: developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet — fdomn-m
– fdomn-m, Commented Feb 21, 2017 at 11:27

fdomn-m · Accepted Answer · 2017-02-21 11:36:04Z

The equivalent of stylesheet.addRule and stylesheet.insertRule is

stylesheet.cssRules

Here's an example using .cssRules that ignores all the inherited and "actual" css that's applied and reads only the rules in your style tag

See https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet for more info.

function addRule(selector, rules) {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    if (stylesheet.addRule) {
      for (var i = 0; i < selector.length; ++i) {
        stylesheet.addRule(selector[i], rules);
      }
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
    }
  }
}

addRule(['.title, h2'], 'color:red;');
addRule(['body h2'], 'font-weight:normal;');

function pushToJson() {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    for(var i = 0; i<stylesheet.cssRules.length;++i) {
        // Do the JSON magic here
        console.dir(
            stylesheet.cssRules[i].selectorText 
            + " : " 
            + stylesheet.cssRules[i].style.cssText)
    }
  }
}

pushToJson();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="myId" type="text/css">
  body {
    background-color: lightblue;
  }
</style>
<h2>Title</h2>

kind user · Accepted Answer · 2017-02-21 11:08:25Z

1

Following code grabs the entire code from the specified style tag. You can then store it inside a new variable or do whatever you want with it.

var newJSON = {};

function addRule(selector, rules) {
  var stylesheet = document.getElementById('myId');
  if (stylesheet) {
    stylesheet = stylesheet.sheet;
    if (stylesheet.addRule) {
      for (var i = 0; i < selector.length; ++i) {
        stylesheet.addRule(selector[i], rules);
      }
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector.join(',') + ' { ' + rules + ' }', stylesheet.cssRules.length);
    }
  }
  pushToJson();
}

function pushToJson() {
  newJSON = $('#myId').html();
  console.log(newJSON);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="myId" type="text/css">
  body {
    background-color: lightblue;
  }
</style>

edited Feb 21, 2017 at 11:08

answered Feb 21, 2017 at 10:50

kind user

42k8 gold badges69 silver badges78 bronze badges

9 Comments

Adrian Over a year ago

I forgot to mention that, I am adding css dynamically into <style>

kind user Over a year ago

@Adrian What do you mean by dynamically? You are importing another css stylesheet or using an asynchronous call?

Adrian Over a year ago

Updated my question, wasn't sure that adding later css into my style, can be a problem when I want to grab it :(

kind user Over a year ago

addRule() function is executed as first function, right? It fills up the stylesheet with css properties and then you want to export it into JSON?

Adrian Over a year ago

yes, I run multiple addRule() functions and at the end I run JSON save

|

Alexandre Nicolas · Accepted Answer · 2017-02-21 10:49:39Z

0

You should try this:

$('#myId').css()

answered Feb 21, 2017 at 10:49

Alexandre Nicolas

1,94917 silver badges20 bronze badges

Comments

Krishna9960 · Accepted Answer · 2017-02-21 10:56:14Z

0

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>

  </title>
  <link rel="stylesheet" href="">
  <style>
    #myname{
      color: red;
    }
  </style>
</head>    


//This Line will yield you the style innerHTML

console.log(document.head.innerHTML);

answered Feb 21, 2017 at 10:56

Krishna9960

5292 silver badges14 bronze badges

Comments

Vitalii Andrusishyn · Accepted Answer · 2017-02-21 11:05:14Z

0

Use code like this:

var element = document.getElementById('myId'),
    style = window.getComputedStyle(element);
jsonStyle = JSON.stringify(style);

answered Feb 21, 2017 at 11:05

Vitalii Andrusishyn

4,2121 gold badge28 silver badges34 bronze badges

5 Comments

Adrian Over a year ago

With this I am getting a lot of css, don't know from where. Sample: {"0":"animation-delay","1":"animation-direction","2":"animation-duratio..

Vitalii Andrusishyn Over a year ago

You take all of style of this element include inherited

Vitalii Andrusishyn Over a year ago

if you need to take just itself try use this code: var style = document.getElementById('myId').style, jsonStyle = JSON.stringify(style);

Adrian Over a year ago

again is getting strange css {\"alignContent\":\"\",\"alignItems\":\"\",\"alignSelf\":\"\",\"alignmentBasel..

Adrian Over a year ago

did this maybe it will help fiddle

Collectives™ on Stack Overflow

get css from <style> as text for output

5 Answers 5

Comments

9 Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

9 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related