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

y a-t-il un moyen de changer les propriétés d'une classe CSS, et non les propriétés de l'élément, en utilisant jQuery?

Ceci est un exemple pratique:

j'ai un div avec classe red

" 
.red {background: red;}

je veux changer la classe red propriété d'arrière-plan, pas les éléments qui ont la classe red assignée d'arrière-plan.

si je le fais avec jQuery .méthode css () 1519180920" : 

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

elle affectera les éléments qui ont actuellement la classe red . Jusqu'ici tout va bien. Mais si je fais un appel Ajax, et que j'insère plus de divs avec la classe red , ceux-là n'auront pas de fond vert, ils auront le fond initial red .

je pourrais appeler jQuery .css() la méthode de nouveau. Mais je voudrais savoir si il existe un moyen de changer la classe elle-même. Veuillez tenir compte de cela est juste un exemple de base.

58
demandé sur Alvaro 2012-07-13 20:21:56

8 réponses

vous ne pouvez pas changer les propriétés CSS directement avec jQuery. Mais vous pouvez obtenir le même effet dans au moins deux façons.

charge dynamique CSS à partir d'un fichier 

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        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 tiré de:

ajout dynamique d'un élément de Style 

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

le exemple de code est copié de ce violon JSFiddle initialement référencé par Alvaro dans leur commentaire .

32
répondu Dennis Traub 2017-05-23 11:47:17

si vous ne pouvez pas utiliser une feuille de style différente en la chargeant dynamiquement, vous pouvez utiliser cette fonction pour modifier la classe CSS. Espérons qu'il 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 = $('<div id="css-modifier-container"></div>');
        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 = $('<div data-class="' + className + '"></div>');
        classContainer.appendTo(cssMainContainer);
    }

    // append additional style
    classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}

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

15
répondu Mathew Wolf 2015-04-15 07:07:14

N'a pas trouvé la réponse que je voulais, donc je l'ai résolu moi-même:

modifier un conteneur div! 

<div class="rotation"> <!-- Set the container div's css -->
  <div class="content" id='content-1'>This div gets scaled on hover</div>
</div>

<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>

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

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

modifier le contenu du div contenant avec du css() 

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

exemple Codepen

7
répondu drumbumLOLcatz 2016-03-09 01:55:37

vous pouvez supprimer des classes et ajouter des classes dynamiquement 

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
6
répondu Ajmal Salim 2013-07-23 10:22:17

vous pouvez ajouter une classe au parent de la div rouge, par exemple green-style 

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

puis ajouter du style à la css 

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

ainsi chaque fois que vous ajoutez l'élément rouge sous le vert-style, le fond sera Vert

1
répondu Welly 2013-11-07 03:09:03

voici une petite amélioration par rapport à L'excellente réponse fournie par Mathew Wolf. Celui-ci ajoute le conteneur principal comme étiquette de style à l'élément de tête et ajoute chaque nouvelle classe à cette étiquette de style. un peu plus concis et je trouve qu'il fonctionne bien. 

function changeCss(className, classValue) {
    var cssMainContainer = $('#css-modifier-container');

    if (cssMainContainer.length == 0) {
        var cssMainContainer = $('<style id="css-modifier-container"></style>');
        cssMainContainer.appendTo($('head'));
    }

    cssMainContainer.append(className + " {" + classValue + "}\n");
}
0
répondu Justin MacArthur 2014-11-27 01:17:22

vous pouvez vouloir prendre une approche différente: au lieu de changer le css dynamiquement, prédéfinez vos styles dans le CSS comme vous le voulez. Ensuite, utilisez JQuery pour ajouter et supprimer des styles dans Javascript. (voir code de Ajmal)

0
répondu dutchman711 2015-02-08 11:28:23

$(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 le <head> (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 que l'objet styleSheet, il a quelques propriétés/méthodes intéressantes.

parce que CSS est une "cascade", quelle que soit la règle que vous essayez d'insérer pour ce sélecteur, vous pouvez juste l'ajouter au bas du fichier CSS et il écrasera tout ce qui a été conçu à la charge de la page.

dans certains navigateurs, après avoir manipulé le fichier CSS, vous devez forcer CSS à "redessiner" en appelant une méthode inutile dans DOM JS comme document.offsetHeight (c'est abstracted up as a DOM property, not method, so don't use "()") -- Il suffit d'ajouter qu'après votre manipulation CSSOM force la page à se redessiner dans des navigateurs plus anciens.

donc voici un exemple:

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

0
répondu Benny 2015-07-27 18:11:36