jQuery CSS - Write into the <style>-tag
jQuery always adds its CSS in the tag itself.
I think you should use the append()
function with a new body style rule.
Like this:
var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);
or
$("body").css({ /*CSS rule...*/ });
I hope this is what you meant...
The are specific methods for manipulating stylesheets,
DOM: insertRule()
Microsoft: addRule()
I just made a method for jQuery(maybe somebody else already did, I don't know)
(
function( $ )
{
$.style={
insertRule:function(selector,rules,contxt)
{
var context=contxt||document,stylesheet;
if(typeof context.styleSheets=='object')
{
if(context.styleSheets.length)
{
stylesheet=context.styleSheets[context.styleSheets.length-1];
}
if(context.styleSheets.length)
{
if(context.createStyleSheet)
{
stylesheet=context.createStyleSheet();
}
else
{
context.getElementsByTagName('head')[0].appendChild(context.createElement('style'));
stylesheet=context.styleSheets[context.styleSheets.length-1];
}
}
if(stylesheet.addRule)
{
for(var i=0;i<selector.length;++i)
{
stylesheet.addRule(selector[i],rules);
}
}
else
{
stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);
}
}
}
};
}
)( jQuery );
Example usage:
$.style.insertRule(['p','h1'], 'color:red;')
$.style.insertRule(['p'], 'text-decoration:line-through;')
$.style.insertRule(['div p'], 'text-decoration:none;color:blue')
the second argument should be clear, the rules. As optional 3rd argument the context-document can be supplied.
The first argument are the selectors as array-elements.
Note that you dont have to use there different selector separated by comma, as MSIE only accepts "Single contextual selectors" as argument for addRule()
Check out the fiddle: http://jsfiddle.net/doktormolle/ubDDd/
While not changing an existing style element, this works as a cross-browser way to create a new one:
$( "<style>body { background: black; }</style>" ).appendTo( "head" )
By cascading, it'll override existing styles, which should do the trick.
Perhaps it's easier to copy all the existing rules to a string, add your stuff or modify what's in there, delete the existing tag and replacing it modified, like so:
//Initialize variable
var cssRules = '';
//Copy existing rules
for (var i = 0; i < document.styleSheets[0].cssRules.length; i++) {
cssRules += document.styleSheets[0].cssRules[i].cssText;
}
//Delete existing node
$('style').remove();
// .... Add stuff to cssRules
//Append new nodes
$('<style>' + cssRules + '</style>').appendTo('head');