web-dev-qa-db-fra.com

Modifier dynamiquement les règles CSS en JavaScript ou jQuery

Je cherche un moyen de changer les règles CSS de ma feuille de style importée dans le document. J'ai donc une feuille de style externe et quelques attributs class et div à l'intérieur. Je souhaite modifier l'une des règles avec JavaScript ou jQuery.

Voici un exemple :

.red{
    color:red;
}

L'idée est donc de faire quelque chose en JavaScript et le HTML sait que maintenant le color est une autre couleur comme celle-ci:

.red{
    color:purple;
}

Mais je veux avoir cette règle pour chaque élément que j'ajouterai à l'avenir par voie d'ajout. Donc, si j'ajoute un span avec la classe CSS .red, le texte doit être violet et non rouge.

J'espère que je l'ai dit clairement.

javascriptjquerycssdynamicstylesheet
23
Simon

Vous jQuery .css() méthode pour le faire.

$('.red').css('color', 'purple');

Pour plusieurs règles:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

Lorsque vous ajouterez à l'avenir un élément dynamique à DOM par voie d'ajout, donnez simplement à cet élément quelques class ou id et écrivez CSS règles comme ci-dessus après les avoir ajoutées et elles seront appliqué à tous les éléments créés dynamiquement.

échantillon de travail

Remarque

Ajouter des règles dynamiques n'est pas une bonne solution à mon avis. Au lieu de cela, vous pouvez charger un fichier externe CSS.

Mais si vous avez besoin de quelque chose comme des règles dynamiques, ajoutez la méthode:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

Et pour une utilisation future:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

échantillon de travail

21
thecodeparadox

Vous pouvez injecter des déclarations de style dans le DOM.

$("head").append('<style>.red { color: purple }</style>');
22
Grim...

Si vous souhaitez ajouter une règle, au lieu de modifier directement le style de chaque élément, vous pouvez utiliser CSSStyleSheet.insertRule() . Il prend deux paramètres: la règle sous forme de chaîne et où insérer la règle.

Exemple du lien ci-dessus:

// Push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

Dans ce cas, myStyle est le .sheet membre d'un élément style.

Autant que je sache, l'élément style doit être inséré dans le document avant de pouvoir saisir sa feuille, et il ne peut pas s'agir d'une feuille externe. Vous pouvez également récupérer une feuille de document.styleSheets, par exemple.

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Remarque: La page recommande de modifier les éléments en changeant leurs classes, au lieu de modifier les règles.

7
leewz