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.
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.
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:
$("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 .
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"
.
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)");
Vous pouvez supprimer des classes et ajouter des classes de manière dynamique
$(document).ready(function(){
$('#div').removeClass('left').addClass('right');
});
$(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);
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
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");
}
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)