web-dev-qa-db-fra.com

Changer les propriétés des classes CSS avec jQuery

Existe-t-il un moyen de modifier les propriétés d'une classe CSS, et non les propriétés d'élément, à l'aide de jQuery?

Ceci est un exemple pratique:

J'ai un div de classe red

.red {background: red;}

Je souhaite modifier la propriété de classe red background, et non les éléments auxquels la classe red est affectée.

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

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

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

Je pourrais appeler jQuery méthode. Css () à nouveau. Mais j'aimerais savoir s'il existe un moyen de changer la classe elle-même. Veuillez considérer ceci comme un exemple élémentaire.

jquerycssajaxclassproperties
63
Alvaro

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 dynamiquement 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 copié de:

Ajouter dynamiquement un élément de style

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

L'exemple de code est copié depuis ce violon JSFiddle référencé à l'origine par Alvaro dans son commentaire .

35
Dennis Traub

Si vous ne pouvez pas utiliser différentes feuilles de style en les chargeant de manière dynamique, vous pouvez utiliser cette fonction pour modifier une 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 = $('<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 les 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".

17
Mathew Wolf

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

<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 que vous souhaitez conserver après l'exécution de $ target.css ()

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

modifier le contenu du div contenant avec css ()

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

exemple de Codepen

7
drumbumLOLcatz

Vous pouvez supprimer des classes et ajouter des classes de manière dynamique

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

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

styleSheetIndex est la valeur d'index correspondant à 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 la ligne dans ce fichier. Pour obtenir le dernier numéro de ligne, utilisez $(document)[0].styleSheets[styleSheetIndex].cssRules.length. Juste console.log Cet 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 simplement l'ajouter au bas du fichier CSS et elle écrasera tout ce qui a été stylé au chargement de la page.

Dans certains navigateurs, après avoir manipulé le fichier CSS, vous devez obliger CSS à "redessiner" en appelant une méthode sans objet dans DOM JS telle que document.offsetHeight (Elle est résumée en tant que propriété DOM, pas méthode, use "()") - en ajoutant simplement qu'après que votre manipulation CSSOM force la page à se redessiner dans les navigateurs plus anciens.

Alors, voici un exemple:

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

2
Benny

Vous pouvez ajouter une classe au parent de la div en rouge, par exemple. style vert

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

puis ajoutez du style au css

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

donc, chaque fois que vous ajoutez un élément rouge sous green-style, l'arrière-plan sera vert

1
Welly

Voici une 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 ça marche 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
Justin MacArthur

Vous voudrez peut-être adopter une approche différente: au lieu de changer le fichier CSS de façon dynamique, prédéfinissez vos styles en CSS comme vous le souhaitez. Ensuite, utilisez JQuery pour ajouter et supprimer des styles de Javascript. (voir le code de Ajmal)

0
checkmate711