Comment redéfinir les classes CSS avec JavaScript

Question

Disons que nous avons défini une classe CSS qui est appliquée à divers éléments d'une page.

colourful 
{ 
    color: #DD00DD; 
    background-color: #330033; 
} 

Les gens se sont plaints de la couleur, qu'ils n'aiment pas rose/violet. Donc, vous voulez leur donner la possibilité de changer le style comme ils le souhaitent, et ils peuvent choisir leurs couleurs préférées. Vous avez un petit widget sélecteur de couleurs qui invoque une fonction Javascript:

function changeColourful(colorRGB, backgroundColorRGB) 
{ 
    // answer goes here 
} 

Qu'est-ce qui se passe dans le corps de cette fonction?

L'intention étant que lorsque l'utilisateur choisit une nouvelle couleur sur le sélecteur de couleurs, tous les éléments avec class="colourful" verront leur style changé.

Answer 1

Je ne sais pas comment manipuler la classe direc tly, mais vous pouvez effectivement faire la même chose. Voici un exemple dans jQuery.

$('.colourful').css('background-color', 'purple').css('color','red'); 

En clair javascript, vous auriez à faire plus de travail.

Answer 2

Quelque chose comme

function changeColourful(colorRGB, backgroundColorRGB) 
{changeColor (document, colorRGB, backgroundColorRGB)} 

function changeColor (node, color, changeToColor) 
{ 
    for(var ii = 0 ; ii < node.childNodes.length; ii++) 
    { 
    if(node.childNodes[ii].childNodes.length > 0) 
    { 
     changeColor(node.childNodes[ii], color, changeToColor); 
    } 

     if(node[ii].style.backgroundColor == color) 
     { 
     node[ii].style.backgroundColor = changeToColor; 
     } 

    } 


} 

Answer 3

je mettre en œuvre effectivement ce côté serveur; juste stocker les couleurs préférées de l'utilisateur dans leur session (via les cookies ou tout ce qui est agréable et facile pour vous) et générer le CSS dynamiquement, à savoir

colourful { 
    color: ${userPrefs.colourfulColour}; 
    background-color: ${userPrefs.colourfulBackgroundColour}; 
} 

Si cela vous convient vraiment beaucoup mieux de le faire via Javascript, vous pouvez manipuler le CSS en utilisant Javascript. Voir, par exemple:

• Microsoft's Documentation
• https://developer.mozilla.org/en/DOM/style

Answer 4

Vérifiez d'abord si document.styleSheets est défini (voir @ réponse de alex).

Dans le cas contraire, cette question devrait être utile:
Get All Elements in an HTML document with a specific CSS Class

Voir le lien dans la réponse acceptée et ma réponse au fond.

Ceci est seulement un élément de la réponse. Vous devrez toujours aller appliquer les nouvelles valeurs en utilisant la propriété style de chaque élément.

Answer 5

exemple rapide pour une div/couleur spécifique - qui pourrait être dynamiquement passé via une fonction

 
document.getElementById('Your Div Name Here').style.background = 'white'; 

Ou, pour changer la classe de l'élément spécifié

 
document.getElementById('Your Div Name Here').classname = 'newclassname' 

C'est en supposant que vous pouvez spécifier les divs de cette façon, sinon, une combinaison de ceci et de la solution de bouclage de noeud que Kevin a montré devrait faire l'affaire

Answer 6

var setStyleRule = function(selector, rule) { 
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)]; 
    if(stylesheet.addRule) { 
     stylesheet.addRule(selector, rule) 
    } else if(stylesheet.insertRule) { 
     stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
    } 
}; 

Answer 7

jQuery:

function changeColourful(colorRGB, backgroundColorRGB) 
{ 
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB}); 
} 

Si vous voulez que les modifications persistent sur plusieurs pages que vous auriez à les stocker dans un cookie et réappliquer la fonction à chaque fois.

Answer 8

J'ai juste essayé d'utiliser un < style> tag vide dans la tête <>, puis de le remplir dynamiquement. Semble travailler dans ff3, au moins.

Alors:

Dans la tête <>, insérer quelque chose comme:

<style id="customstyle" type="text/css"></style> 

Maintenant, vous pouvez utiliser quelque chose comme jquery pour remplacer ou ajouter son contenu:

pour remplacer:

$("#customstyle").text(".colourful { color: #345 ; }"); 

En complément:

$("#customstyle").append(".colourful { color: #345 ; }"); 

Si vous voulez enregistrer quelque part, il suffit de prendre le contenu:

var csscontent = $("#customstyle").text(); 

.. alors vous pouvez le renvoyer au serveur via ajax.

Answer 9

Ceci est un exemple complet pour changer une image de fond en une feuille de style. Première partie localiser la bonne feuille de style. Ici, je voulais le dernier, dont href contenait "mycss.css". Vous pouvez également utiliser la propriété title.

Deuxième partie localiser la bonne règle. Ici, je mets un marqueur "MYCSSRULE" pour que je puisse trouver la bonne règle.

La règle CSS dans mycss.css est: #map td, MYCSSRULE {background-image: url ("img1.png"); }

La troisième partie vient modifier la règle.

Ce processus ne fonctionne pas avec Internet Explorer 6. (IE 8 est ok). Fonctionne avec Firefox 3 et Webkit.

J'espère que cela a aidé.

function changeBgImg(newimage) { 
    var i,n; 
    var ssheets = document.styleSheets;   // all styleSheets. Find the right one 
    var ssheet; 

    // find the last one whose href contain "myhref" 
    n = ssheets.length; 
    for (i=n-1; i>=0 ;i--) { 
    var thisheet = ssheets[i]; 
    if ((null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1)) { 
     ssheet = thisheet; break; 
    } 
    } 

    if ((null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) { 
    // stylesheet not found or internet explorer 6 
    return; 
    } 

    // find the right rule 
    var rule; 
    n = ssheet.cssRules.length; 
    for (i=0; i<n; i++) { 
    var r = ssheet.cssRules.item(i); 
    if (typeof(r.selectorText) == "undefined") { continue; } 
    if (r.selectorText.indexOf("MYCSSRULE") != -1) { 
     rule = r; break; 
    } 
    } 

    if (null == rule) { 
    // not found 
    return; 
    } 

    rule.style.backgroundImage = "url(" + newImage + ")"; 
}