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');