Dan Hlavenka Dan Hlavenka - 5 months ago 52
CSS Question

Inject CSS stylesheet as string using Javascript

I'm developing a Chrome extension, and I'd like users to be able to add their own CSS styles to change the appearance of the extension's pages (not web pages). I've looked into using

document.stylesheets
, but it seems like it wants the rules to be split up, and won't let you inject a complete stylesheet. Is there a solution that would let me use a string to create a new stylesheet on a page?

I'm currently not using jQuery or similar, so pure Javascript solutions would be preferable.

Answer

You could create a style element and add the string as the innerHTML. Something like this:

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way allows you to add CSS in multiple passes

(Important edit: Be aware that IE9 and below only allows up to 32 stylesheets, so watch out when using the above snippet. The number was increased to 4095 in IE10.)

If, when a user adds new CSS, you want to remove the old styles and add the new, you can switch the function up so you have a reference to one node.

(function() {
    var node = document.createElement('style');
    document.body.appendChild(node);
    window.addStyleString = function(str) {
        node.innerHTML = str;
    }
}());

addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way will remove the old style when the new one is added