Get CSS rules into javascript variable

Question

I am wanting to be able to select chunks of CSS Rules using JavaScript or jQuery and get them into a variable, basically as the preformatted text you would expect in a style-sheet.

Ideally we would carefully comment our CSS styles and have them simply in the <head> <style> tag on the html page. The JavaScript would locate the particular comment that wraps the rules within the <style> tag on the page, and copy those rules to a variable as text, for later use.

/* CSS Rules */

.example{
    font-size: 1em;
    color:blue;
}

/* end */

In this case the script would find the string /* CSS Rule */, then select all the lines below it until it hits a terminating comment /* end */

Any ideas? I've googled a fair bit for a solution, but guess this is a pretty unusual thing to be doing, having a hard time finding any pointers.

Why? I'm pretty sure there are more efficient ways to achieve what you need. — helion3, May 29 '15 at 00:17
You want to do this at runtime, or you just want a text parser to pull stuff out of files? — Cooper Buckingham, May 29 '15 at 00:18
The easiest way (if this is really what you want to do) would probably be to use [regexs](https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions) to find the open and close tags and take the text in the middle of the two. Although as helion3 said, this is a weird thing to do and there's probably a better way. — Jack TC, May 29 '15 at 00:20
Aren't they already JavaScript variables? e.g.: document.styleSheets[0].cssRules[0].cssText — Curtis Autery, May 29 '15 at 00:32
check out this answer http://stackoverflow.com/a/2707837/4347337 — Brino, May 29 '15 at 00:37

score 2 · Answer 1 · answered May 29 '15 at 00:25

Welp...you could always have an id on your style tag like

<style id="css">div{ background-color:red; }</style>

And then grab the contents with jquery

var cssText = $('#css').html();

But this whole thing would make Ada Lovelace cry, maybe you can find another way to fullfil your requirements?

score 0 · Answer 2 · 2015-05-29T01:07:53.777

It's a bit hacky-ish, but here is one way to do this -

Extract the text (use regex or indexOf) - assuming you have the text block, create a data-uri out of it:

var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt);

create a link element and set rel to stylesheet (browser is able to deal with type):

var link = document.createElement("link");
link.rel= "stylesheet";
link.href = cssURL;

Add to header to load and parse:

document.getElementsByTagName("head")[0].appendChild(link);

Example

Only the green should show -

var css = ".s1 {border:1px solid red} " + 
          "/* start */ .s2 {border:1px solid green} /* end */ " + 
          ".s3 {border:1px solid blue}";

// get css text and convert to data-uri
var start = css.indexOf("/* start */");
var end = css.indexOf("/* end */", start);
var cssTxt = css.substring(start, end);
var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt);

// create link element and add to header
var link = document.createElement("link");
link.rel= "stylesheet";
link.href = cssURL;

document.getElementsByTagName("head")[0].appendChild(link);

<div class="s1">Class s1 - ignored</div>
<div class="s2">Class s2 - should have green border</div>
<div class="s3">Class s3 - ignored</div>

Get CSS rules into javascript variable

2 Answers2

Example