jQuery CSS - Write into the <style>-tag

jquery css stylesheet

Peter · Nov 20, 2010 · Viewed 77.7k times · Source

I want to change the background-color of the body of my HTML document. My problem is that jQuery adds the style to the body tag, but I want to change the value in the style tag. Is this possible using jQuery?

Example-Code

    <style title="css_style" type="text/css">
    body {
      background-color:#dc2e2e;     /* <- CHANGE THIS */
      color:#000000;
      font-family:Tahoma, Verdana;
      font-size:11px;
      margin:0px;
      padding:0px;
      background-image: url(http://abc.de/image.jpg);
    }
    </style>

    ...

    <body>
       // ....
    </body>

jQuery

$('body').css('background-color','#ff0000');

Result

<body style="background-color:#ff0000;">
   // ....
</body>

Answer

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.

jQuery CSS - Write into the <style>-tag

Answer

Related questions