JavaScript: Manipulating text of StyleSheet

Question

I know that it is possible to get a collection of attached stylesheets using document.styleSheets. I also know it’s possible to work with individual rules within the style sheets.

Is it possible to read and write the entire text of a stylesheet? In particular, I want access to the stylesheets attached via the link tag. I have found nothing through the search engines, and articles documenting stylesheets (such as the MDN article) don’t seem to mention it.

I want to use JavaScript to replace the some of content of the stylesheets on the fly, implementing a slightly dynamic stylesheet.

(I would prefer a solution without jQuery even if I have to do the cross browser work myself. Fortunately, IE8 is not an issue ).

Thanks

https://davidwalsh.name/add-rules-stylesheets http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply — artm, Jan 14 '16 at 01:41
@artm All of these address making a new stylesheet or adding/removing rules. OP wants to get the entire text contents of an existing stylesheet. — Mike Cluck, Jan 14 '16 at 01:46
*I want to use JavaScript to replace the some of content of the stylesheets on the fly, implementing a slightly dynamic stylesheet.* There is almost always a better way, if you tell us what you are trying to accomplisy. — , Jan 14 '16 at 15:43
@torazaburo What I _really_ want to do is implement CSS variables for non compliant variables. This can be done by replacing all instances of `var(--something)` with a value declared earlier. At this stage I don’t know whether the browser would respond to the change in CSS text. It would also allow me to implement some sort of colour theming, again by replacing patterns with set values. — Manngo, Jan 14 '16 at 23:02
@Manngo Have you considered using a CSS preprocessor, such as [Less](http://lesscss.org/) or [Sass](http://sass-lang.com/)? — Mike Cluck, Jan 15 '16 at 00:19
@MikeC I have. The problems with these solutions are (a) they are server-sided and (b) they don’t necessarily do what I want. For example, they have their own syntax rather than the standard (Myth appears to be an exception), so they are locked into using non-standard extensions. Besides, they won’t allow the sort of dynamic behaviour I would like to implement. — Manngo, Jan 15 '16 at 23:30

Mike Cluck · Answer 1 · 2016-01-14T13:04:58.613

1

It is possible if you grab the <style> element using some kind of query method rather than accessing it through document.styleSheets.

var pre = document.querySelector('pre');
var styleSheet = document.querySelector('style');
pre.innerText = styleSheet.innerText;

/* Voila! */
#test {
    position: fixed;
 }

<pre></pre>

To access the contents of an external stylesheet, the only way to do that is with AJAX. Assuming you have access to jQuery's $.ajax function, it looks something like this:

var styleSheet = document.querySelector('style');
$.ajax({
  url: styleSheet.href,
  success: function(contentsOfStyleSheet) {
    // do stuff
  }
});

This will give you access to the contents but you will not be able to directly manipulate the contents of the page in this fashion. The only way to alter the rules of an external CSS file is through the document.styleSheets API that you mentioned.

edited Jan 14 '16 at 13:04

answered Jan 14 '16 at 01:50

Mike Cluck

31,869
13
80
91

This only works for a style block on the actual page. I wanted to know about stylesheets attached to the page which appear to be not part of the DOM. I have edited the question to make this clearer. – Manngo Jan 14 '16 at 06:17
This will only work if the CSS file is hosted on the same server. – Jan 14 '16 at 15:44
@torazaburo That’s fine. See my comment above for why I want to do this. – Manngo Jan 14 '16 at 23:06

JavaScript: Manipulating text of StyleSheet

1 Answers1