Access CSS file contents via JavaScript

With that specific example (where the CSS is on the same origin as the page), you could read the file as text via ajax:

$.ajax({
    url: "/path/to/file.css",
    dataType: "text",
    success: function(cssText) {
        // cssText will be a string containing the text of the file
    }
});

If you want to access the information in a more structured way, document.styleSheets is an array of the style sheets associated with the document. Each style sheet has a property called cssRules (or just rules on some browsers), which is an array of the text of each rule in the style sheet. Each rule has a cssText property. So you could loop through those, e.g.:

$.each(document.styleSheets, function(sheetIndex, sheet) {
    console.log("Looking at styleSheet[" + sheetIndex + "]:");
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        console.log("rule[" + ruleIndex + "]: " + rule.cssText);
    });
});

Live example - That example has one stylesheet with two rules.


you could load the content with a simple ajax get call, if stylesheet is included from the same domain

Edit after your update:
I tried this code (on FX10) as a proof of concept that uses only one request to the CSS but it seems a bit hacky to me and should be tested and verified. it also should be improved with some fallback if javascript is not available.

CSS (external file test.css)

div { border: 3px solid red;}

HTML/jQuery

<!doctype html >
<html>
    <head>
       <!-- provide a fallback if js not available -->
       <noscript>
          <link rel="stylesheet" href="test.css" />
       </noscript>
    </head>
    <body>

        <div></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
        <script>
        $(document).ready(function() {

            $.when($.get("test.css"))
            .done(function(response) {
                $('<style />').text(response).appendTo($('head'));
                $('div').html(response);
            });
        })
        </script>
    </body>
</html>

You should see the CSS code inside the div with a red border all around :)
Enjoy.


The closest you can get to obtaining the stylesheet without using ajax is to indeed iterate over all CSS rules and concatenate them into a string. This yields the original file with all comments and excess whitespace removed. Which makes sense, as the browser only needs to keep the parsed style sheet in memory, not the original file. It is only 3 lines of code:

function css_text(x) { return x.cssText; }
var file = document.getElementById('css');
var content = Array.prototype.map.call(file.sheet.cssRules, css_text).join('\n');

Tags:

Javascript

Css

Jquery

Stylesheet

Recent Posts