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
– helion3, Commented May 29, 2015 at 0:17
You want to do this at runtime, or you just want a text parser to pull stuff out of files? — Cooper Buckingham
– Cooper Buckingham, Commented May 29, 2015 at 0:18
The easiest way (if this is really what you want to do) would probably be to use regexs 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
– Jack TC, Commented May 29, 2015 at 0:20
Aren't they already JavaScript variables? e.g.: document.styleSheets[0].cssRules[0].cssText — Curtis Autery
– Curtis Autery, Commented May 29, 2015 at 0:32

JSelser · Accepted Answer · 2015-05-29 00:25:24Z

2

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?

answered May 29, 2015 at 0:25

JSelser

3,6501 gold badge22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2015-05-29 01:07:53Z

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>

Collectives™ on Stack Overflow

Get CSS rules into javascript variable

2 Answers 2

Comments

Example

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Example

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related