jQuery CSS - Écrire dans le <style>-tag

Je veux changer la background-color de la body de mon document HTML. Mon problème est que jQuery ajoute le style à la body tag, mais je veux changer la valeur dans le style tag. Est-ce possible à l'aide de jQuery?

Exemple De 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>

essayez $('style').text(...new definition...) -- ne l'ai pas testé mais; je ne connais pas jQuery automatisation pour cela.
Donner l'étiquette de style d'un identifiant et d'appel à l'aide de son id. Quelque chose comme: $('#{id}').attr('style', 'background-color:#ff0000;');

InformationsquelleAutor Peter | 2010-11-20

Le sont des méthodes spécifiques pour la manipulation de feuilles de style,

DOM: insertRule()

Microsoft: addRule()

Je viens de faire une méthode pour jQuery(peut-être quelqu'un 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 doit être clair, les règles. Comme option 3ème argument le contexte du document peut être fourni.

Le premier argument sont les sélecteurs en tant que tableau-éléments.

Notez que vous n'avez pas à utiliser qu'il y a différents sélecteur séparés par des virgules, comme MSIE accepte uniquement "Seul les sélecteurs contextuels" comme argument pour addRule()

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

Est-il possible de manipuler les règles en vigueur dans une balise style?
oui, voir la developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/...
Intéressant. Comment les bibliothèques comme jQuery choisir d'ajouter des styles en ligne pour chaque élément sélectionné au lieu de manipuler des feuilles de style de ce genre? Semble magnitudes plus efficace.
Question intéressante, je n'y ai jamais réfléchi. La principale raison est peut-être que la sélection d'éléments dans jQuery est plus complexe, dans de nombreux cas, le choix ne pouvait pas être traduit dans une CSS-sélecteur.
En effet, il existe un plugin jQuery pour manipuler les feuilles de style github.com/f0r4y312/jquery-stylesheet, vous pourriez vouloir vérifier que @Jakobud

InformationsquelleAutor

117

Tout en ne changeant pas d'un style existant élément, cela fonctionne comme une manière de croix-navigateur pour en créer un nouveau:
```
$( "<style>body { background: black; }</style>" ).appendTo( "head" )
```
Par en cascade, il va surcharger les styles existants, ce qui devrait faire l'affaire.
- Meilleur, le plus propre réponse. Testé sur Chrome et IE8 en mode IE7). Mon seul changement est appendTo("tête"), au lieu de "corps", depuis les balises de style ne devrait être incluse dans la tête (à moins, bien sûr, le HTML5 "l'étendue" de l'attribut est inclus sur l'étiquette de style, mais comme ce n'est pas supporté par tous les navigateurs à l'heure actuelle, nous ne pouvons ignorer cette option).
- Je l'ai mis à jour-à-dire appendTo("tête"), merci pour cette remarque.
InformationsquelleAutor Jörn Zaefferer
7

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

Je pense que vous devriez utiliser le append() fonction avec un nouveau corps de règles de style.

Comme ceci:
```
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...
- pour une raison quelconque, cela ne parvient pas dans IE7.
InformationsquelleAutor Shaoz

J'ai été en mesure de modifier l'article en y ajoutant du html.

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

InformationsquelleAutor bobwirka

2

Vous pouvez changer votre corps de la classe, mais vous ne pouvez pas changer votre style de la balise:

HTML:
```
<style title="css_style" type="text/css">
.highlight
{
    background-color:#ff0000;   
}
</style>
```
JavaScript:
```
$('body').toggleClass(".highlight");
```
- En CSS highlight a à la classe-sélecteur de .: .highlight { .. }
- href="http://stackoverflow.com/revisions/4232584/4">Fixe.
InformationsquelleAutor Bahar
1

Peut-être qu'il est plus facile de copier toutes les règles en vigueur pour une chaîne de caractères, ajouter vos trucs ou de modifier ce qui existe, supprimez la balise existante et la remplacer modifiée, 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');
```
- C'est une formidable réponse que j'ai utilisé dans mon projet de créer une liste de séparer les règles CSS inline dans la tête.
InformationsquelleAutor Asinus Rex
0

Aucune des réponses mentionnent jqueryEl.text, si elle est ici:
```
$("<style/>").text(css).appendTo(document.head);
```
InformationsquelleAutor tokland

Vous devez vous connecter pour publier un commentaire.

HTML:

JavaScript: