web-dev-qa-db-fra.com

jQuery CSS - Écrire dans la balise <style>

Je veux changer le background-color de la body de mon document HTML. Mon problème est que jQuery ajoute le style à la balise body, mais je souhaite modifier la valeur de la balise style. Est-ce possible d'utiliser jQuery?

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

Résultat 

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

Ce sont des méthodes spécifiques pour manipuler des feuilles de style,

DOM: insertRule ()
Microsoft: addRule ()

Je viens de faire une méthode pour jQuery (peut-être que quelqu'un d'autre l'a déjà fait, je ne sais pas)

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

Exemple d'utilisation:

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

le deuxième argument devrait être clair, les règles. En tant que troisième argument facultatif, le document contextuel peut être fourni.
Le premier argument sont les sélecteurs en tant qu'éléments de tableau.
Notez que vous ne devez pas utiliser différents sélecteurs séparés par des virgules, car MSIE accepte uniquement les "sélecteurs contextuels uniques" en tant qu'argument pour addRule ().

Découvrez le violon: http://jsfiddle.net/doktormolle/ubDDd/

30
Dr.Molle

Sans changer un élément de style existant, cela fonctionne comme un moyen de créer un nouvel élément entre navigateurs

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

En cascade, il remplacera les styles existants, ce qui devrait faire l'affaire.

115
Jörn Zaefferer

jQuery ajoute toujours son CSS dans la balise elle-même.

Je pense que vous devriez utiliser la fonction append() avec une nouvelle règle de style de corps.

Comme ça:

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

ou

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

J'espère que c'est ce que tu voulais dire ...

7
Shaoz

J'ai pu modifier la section en ajoutant à son code HTML.

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

Vous pouvez changer votre classe de corps mais vous ne pouvez pas changer votre étiquette de style:

HTML:

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

JavaScript:

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

Peut-être est-il plus facile de copier toutes les règles existantes dans une chaîne, d'ajouter vos éléments ou de modifier ce qui y est contenu, de supprimer la balise existante et de la remplacer par la modification, comme suit:

//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

Aucune des réponses existantes ne mentionne jqueryEl.text, alors la voici:

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