jQuery CSS – Ecrivez dans la balise

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

Exemple de code

   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); }  ...  // ....  

jQuery

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

Résultat

  // ....  

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 

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

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

 $( "" ).appendTo( "head" ) 

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

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 …

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

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

HTML:

  

JavaScript:

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

Peut-être est-il plus facile de copier toutes les règles existantes dans une chaîne, d’append 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 $('').appendTo('head'); 

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

 $("").text(css).appendTo(document.head);