Define global CSS classes using JavaScript or jQuery?

css, html, javascript, jquery, styles

Solution

Pure javascript -

var style=document.createElement('style');
style.type='text/css';
if(style.styleSheet){
    style.styleSheet.cssText='your css styles';
}else{
    style.appendChild(document.createTextNode('your css styles'));
}
document.getElementsByTagName('head')[0].appendChild(style);

Problem

Is there a way to set the CSS of global classes using JavaScript or jQuery? That is, append `.my_class { foo:bar }` to the `<style/>` tag of the page?

Original source

Related problems