I have a style element that is loaded from an external resource, and I want to apply it's styles without putting it inline.

For instance <link rel="stylesheet" type="text/css" href="my.css" /> will load a css file and apply it's rules without putting it inline and <script src="zepto.js"></script> will do the same for javascript.

If you load an external bit of js, you can evaluate it using eval() even though that's frowned upon.

But when one loads an external bit of styling, I don't know how to evaluate it except to add it to the dom.

So is there a similar function for styles as eval is to scripts? Does anyone know a good hack to get the same effect?

Anything is fine as long as the styling applies without it showing up in the dom.

I have a style element that is loaded from an external resource, and I want to apply it's styles without putting it inline.

For instance <link rel="stylesheet" type="text/css" href="my.css" /> will load a css file and apply it's rules without putting it inline and <script src="zepto.js"></script> will do the same for javascript.

If you load an external bit of js, you can evaluate it using eval() even though that's frowned upon.

But when one loads an external bit of styling, I don't know how to evaluate it except to add it to the dom.

So is there a similar function for styles as eval is to scripts? Does anyone know a good hack to get the same effect?

Anything is fine as long as the styling applies without it showing up in the dom.

• javascript
• css
• eval

Share Improve this question Follow asked Mar 9, 2016 at 4:01 Seph ReedSeph Reed 11.1k1414 gold badges8484 silver badges154154 bronze badges 13

• stackoverflow./a/10457877/4774263 take a look at this answer, you can load your style via Jquery, just append your styles to the head – Nike Sprite Commented Mar 9, 2016 at 4:05
• 1 Why don't you want to put the stylesheet in the DOM tree? Do you want to avoid polluting it? – BoltClock Commented Mar 9, 2016 at 4:11
• 1 "how to evaluate it" What is expected result of evaluation ? Do you want to add or remove portions of css text before appending css text to DOM ? – guest271314 Commented Mar 9, 2016 at 4:20
• The expected result of evaluation is the same as though the stylesheet were linked externally using the link element. – BoltClock Commented Mar 9, 2016 at 4:29
• @BoltClock Not certain if OP is attempting to 1) modify css text before appending to DOM; 2) access css text as an styleSheet or other object; 3) view applied css text in a document , without using current document ? – guest271314 Commented Mar 9, 2016 at 4:34

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 2

You need to create a style tag add to the head and then set your plete css content into innerHTML.

Ex:

var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);

//here is the magic.
style.innerHTML = 'put the css content'; 
//Ex: style.innerHTML = '.cssClass { color: #F00; }';

You have two options:

1. JavaScript CSS parsers. For example Node.js has pure JS CSS parsers, check http://github./reworkcss/css for example. I have no idea of its quality though.

2. To add those styles to the DOM as content of <style> element and set style.disabled = true on it so its rules will not affect current content.