Menu
Is it possible to get the entire text content of a CSS file in a document? F.ex:
<link rel="stylesheet" id="css" href="/path/to/file.css"> <script> var cssFile = document.getElementById('css'); // get text contents of cssFile </script> I’m not really into getting all the CSS rules via document.styleSheets, is there another way?
Update: There is the ajax option of course, I appreciate the answers given. But it seems rather unnecessary to reload a file using ajax that is already loaded in the browser. So if anyone knows another way to extract the text contents of a present CSS file (NOT the CSS rules), please post!
579
Style Sheet PropertiesThe stylesheet object is available through JavaScript, and allows you to access information about a style sheet referenced from the current web page, such as if it is disabled, its location, and the list of CSS rules it contains.
JavaScript can change Css styles such as color, font size etc. of elements using some methods such as getElementById(), getElementByClassName() etc. In the following example font style and font size of the elements have changed using getElementById() method.
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.
116
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
