it-swarm.com.de

jQuery CSS - Schreiben Sie in das <style> -Tag

Ich möchte den background-color der body meines HTML-Dokuments ändern. Mein Problem ist, dass jQuery dem body-Tag den Stil hinzufügt, ich möchte jedoch den Wert im style-Tag ändern. Ist das mit jQuery möglich?

Beispielcode

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

Ergebnis

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

Es gibt bestimmte Methoden zur Bearbeitung von Stylesheets.

DOM: insertRule ()
Microsoft: addRule ()

Ich habe gerade eine Methode für jQuery gemacht (vielleicht hat es schon jemand anders getan, ich weiß es nicht)

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

Verwendungsbeispiel:

$.style.insertRule(['p','h1'], 'color:red;')
$.style.insertRule(['p'],      'text-decoration:line-through;')
$.style.insertRule(['div p'],  'text-decoration:none;color:blue')

das zweite Argument sollte klar sein, die Regeln. Als optionales 3. Argument kann das Kontextdokument angegeben werden.
Das erste Argument sind die Selektoren als Array-Elemente.
Beachten Sie, dass Sie dort keinen anderen durch Komma getrennten Selektor verwenden müssen, da MSIE nur "Einzelkontextselektoren" als Argument für addRule () akzeptiert

Schauen Sie sich die Geige an: http://jsfiddle.net/doktormolle/ubDDd/

30
Dr.Molle

Ein vorhandenes Stilelement wird nicht geändert, doch dies ist eine Art Browser-übergreifender Weg, um ein neues zu erstellen:

$( "<style>body { background: black; }</style>" ).appendTo( "head" )

Durch das Kaskadieren werden vorhandene Stile überschrieben, was den Trick erfüllen sollte.

115
Jörn Zaefferer

jQuery fügt sein CSS immer im Tag selbst hinzu.

Ich denke, Sie sollten die Funktion append() mit einer neuen Body-Style-Regel verwenden.

So was:

var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);

oder

$("body").css({ /*CSS rule...*/ });

Ich hoffe das ist was du gemeint hast ...

7
Shaoz

Ich konnte den Abschnitt durch Hinzufügen von HTML-Code ändern.

var styleText = $('style').html();
styleText += '\n' + '#TabName div ul li a {border-top-left-radius:5px;}';
$('style').html(styleText);
3
bobwirka

Sie können Ihre Körperklasse ändern, aber Sie können Ihr Style-Tag nicht ändern:

HTML:

<style title="css_style" type="text/css">
.highlight
{
    background-color:#ff0000;   
}
</style>

JavaScript:

$('body').toggleClass(".highlight");
2
Bahar

Vielleicht ist es einfacher, alle vorhandenen Regeln in eine Zeichenfolge zu kopieren, Ihre Inhalte hinzuzufügen oder den Inhalt zu ändern, das vorhandene Tag zu löschen und das geänderte zu ersetzen.

//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');
1
Asinus Rex

In keiner der vorhandenen Antworten wird jqueryEl.text erwähnt, daher hier:

$("<style/>").text(css).appendTo(document.head);
0
tokland