3

I have long known that you can load style rules into a page dynamically by using addRule() and insertRule(), depending on whether it is IE or a standards compliant browser. But I just discovered that on Chrome, a much more generally-useful (for me) approach works just fine: create a style element, add a texnode to it with arbitrary css text (it could be the contents of a css file), then add that to the document. You can also remove it by removing that style node from the document. For instance this function works fine when I send it the string "div {background-color: red; }\n p {font-family: georgia; }":

var applyCss = function (cssString) {
  var scriptNode = document.createElement('style');
  scriptNode.appendChild(document.createTextNode(cssString));
  document.getElementsByTagName('head')[0].appendChild(scriptNode);
  return scriptNode;
};

While I understand the benefits of doing it on a rule basis in some scenarios, this shortcut (which is kind of analogous to using innerHTML instead of building elements part by part using DOM techniques) would be particularly useful to me in a lot of situations if I can count on it working.

Is it consistently supported? Is there any downside to this approach? I'm particularly curious because I've never seen this approach suggested anywhere.

Improve this question

2 Answers 2

Reset to default
1

The primary reason you wouldn't see this approach mentioned or suggested anywhere is largely because it's unnecessary. Instead of constantly trying to edit style elements, you should have a set of classes that you add and remove from elements dynamically.

In my experience, dynamically adding a style element with text works cross browser. So far I haven't found a browser that doesn't work with something like:

//jQuery for brevity
$('<style>p{margin:0}</style>').appendTo('head');

The only situation I've ever needed this in was for adding a large set of very specific styles for usage with a bookmarklet. Otherwise, I'll dynamically add a stylesheet:

$('<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css />').appendTo('head');

But really, stylesheets should already exist within the HTML.

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

5 Comments

Thanks, good to know. There are lots of uses for this sort of thing, from themable cross-domain widgets to development tools that allow you to tweek the site real time rather than refreshing with every change.
@rob, jQuery-UI uses external stylesheets rather than assuming that someone who uses it wants the default styles. I fully understand that it's useful under certain circumstances, but it's good practice to treat HTML CSS and JS as an MVC pattern: HTML is the Model, CSS is the View, and JS is the controller. If you put the styles in the JS, it breaks the pattern.
@zzzzBov There are some particular situations you haven't encountered, where you might want to load a css text dynamically (generally when the CSS text is dynamically generated).
@Tiberiu-IonuțStan, which CSS would be dynamically generated? I certainly hope you're not dynamically generating content: "" styles, because that would be an abuse of CSS.
@zzzzBov maybe you have some something like a table with dynamic contents and user tools such as markers with custom colors, or maybe you have a CSS builder tool, or tool to override the default CSS on any website while trying out multiple combinations of colors.
0

Use YepNope lib, it will do the dirty stuff for you. And it's only 1.7kb when gzipped and minified.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.