Modifier les propriétés de classe CSS avec jQuery

Est-il possible de modifier les propriétés d’une classe CSS, pas les propriétés de l’élément, en utilisant jQuery?

Ceci est un exemple pratique:

J’ai une div avec la classe red

 .red {background: red;} 

Je veux changer red propriété d’arrière-plan de classe red , pas les éléments qui ont red arrière-plan de classe red assigné.

Si je le fais avec la méthode jQuery .css () :

 $('.red').css('background','green'); 

cela affectera les éléments qui ont maintenant la classe red . Jusqu’ici tout va bien. Mais si je fais un appel Ajax et que j’insère plus de div avec red classe red , ceux-ci n’auront pas un arrière-plan vert, ils auront le fond red initial.

Je pourrais appeler la méthode jQuery .css () à nouveau. Mais j’aimerais savoir s’il existe un moyen de changer la classe elle-même. Veuillez considérer que ceci n’est qu’un exemple de base.

    Vous ne pouvez pas modifier les propriétés CSS directement avec jQuery. Mais vous pouvez obtenir le même effet d’au moins deux manières.

    Charger dynamicment les CSS depuis un fichier

     function updateStyleSheet(filename) { newstylesheet = "style_" + filename + ".css"; if ($("#dynamic_css").length == 0) { $("head").append("") css = $("head").children(":last"); css.attr({ id: "dynamic_css", rel: "stylesheet", type: "text/css", href: newstylesheet }); } else { $("#dynamic_css").attr("href",newstylesheet); } } 

    L’exemple ci-dessus est copié à partir de:

    • Comment changer de fichier CSS à la volée en utilisant jQuery

    Ajouter dynamicment un élément de style

     $("head").append(''); var newStyleElement = $("head").children(':last'); newStyleElement.html('.red{background:green;}'); 

    L’exemple de code est copié à partir de ce violon JSFiddle initialement référencé par Alvaro dans leur commentaire .

    Si vous ne pouvez pas utiliser une feuille de style différente en la chargeant dynamicment, vous pouvez utiliser cette fonction pour modifier la classe CSS. J’espère que ça vous aide …

     function changeCss(className, classValue) { // we need invisible container to store additional css definitions var cssMainContainer = $('#css-modifier-container'); if (cssMainContainer.length == 0) { var cssMainContainer = $('
    '); cssMainContainer.hide(); cssMainContainer.appendTo($('body')); } // and we need one div for each class classContainer = cssMainContainer.find('div[data-class="' + className + '"]'); if (classContainer.length == 0) { classContainer = $('
    '); classContainer.appendTo(cssMainContainer); } // append additional style classContainer.html(''); }

    Cette fonction prendra n’importe quel nom de classe et remplacera les valeurs précédemment définies par la nouvelle valeur. Notez que vous pouvez append plusieurs valeurs en transmettant ce qui suit dans classValue: "background: blue; color:yellow" .

    Vous pouvez supprimer des classes et append des classes dynamicment

     $(document).ready(function(){ $('#div').removeClass('left').addClass('right'); }); 

    Je n’ai pas trouvé la réponse que je voulais, alors je l’ai résolu moi-même:
    modifier un div de conteneur!

     
    This div gets scaled on hover
    This div does not

    css que vous souhaitez persister après avoir exécuté $ target.css ()

     .content:hover { transform: scale(1.5); } 

    modifier le contenu contenant div avec css ()

     $(".rotation").css("transform", "rotate(" + degrees + "deg)"); 

    Exemple de codepen

    Vous pouvez append une classe au parent du div rouge, par exemple le style vert

     $('.red').parent().addClass('green-style'); 

    puis append du style au css

     .green-style .red { background:green; } 

    donc chaque fois que vous ajoutez un élément rouge dans le style vert, l’arrière-plan sera vert

    Voici une petite amélioration par rapport à l’excellente réponse fournie par Mathew Wolf. Celui-ci ajoute le conteneur principal en tant que balise de style à l’élément head et ajoute chaque nouvelle classe à cette balise de style. un peu plus concis et je trouve que cela fonctionne bien.

     function changeCss(className, classValue) { var cssMainContainer = $('#css-modifier-container'); if (cssMainContainer.length == 0) { var cssMainContainer = $(''); cssMainContainer.appendTo($('head')); } cssMainContainer.append(className + " {" + classValue + "}\n"); } 

    Vous voudrez peut-être adopter une approche différente: au lieu de modifier le css de manière dynamic, prédéfinissez vos styles en CSS comme vous le souhaitez. Ensuite, utilisez JQuery pour append et supprimer des styles depuis Javascript. (voir le code d’Ajmal)

    $(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);


    styleSheetIndex est la valeur d’index qui correspond à l’ordre dans lequel vous avez chargé le fichier dans (par exemple, 0 est le premier fichier, 1 est le suivant, etc. s’il n’y a qu’un seul fichier CSS, utilisez 0).

    rule est une règle CSS de chaîne de texte. Comme ceci: "body { display:none; }" .

    lineIndex est le numéro de ligne de ce fichier. Pour obtenir le dernier numéro de ligne, utilisez $(document)[0].styleSheets[styleSheetIndex].cssRules.length . Juste console.log cet object styleSheet, il possède des propriétés / méthodes intéressantes.

    Étant donné que CSS est une “cascade”, vous pouvez simplement append au bas du fichier CSS la règle que vous essayez d’insérer pour ce sélecteur. Elle écrasera tout ce qui a été stylé lors du chargement de la page.

    Dans certains navigateurs, après avoir manipulé le fichier CSS, vous devez forcer CSS à “redessiner” en appelant une méthode sans intérêt dans DOM JS comme document.offsetHeight (elle est abstraite en tant que propriété DOM, pas méthode, donc n’utilisez pas “( ) “) Il suffit d’append cela après que votre manipulation CSSOM a forcé la page à se redessiner dans les anciens navigateurs.


    Alors, voici un exemple:

    var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);