Modifier ses feuilles de styles .css à la volée avec javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 152 fois - Téléchargée 16 fois

Contenu du snippet

Permet de modifier n'importe quel style CSS défini dans ses feuilles de style CSS à l'aide de la syntaxe :

CSS.setProperty('nom_de_mon_fichier_css', 'selecteur_par_ex_div', 'class_par_ex_font-size', 'valeur_par_ex_12px');

Ou de récupérer la valeur d'une propriété par :

CSS.getProperty('nom_css_file', 'selecteur', 'classe');

Enjoy

On peut voir une utilisation de ce code sur les sites :
- http://www.atelier-icare.net/paradigme.php
- http://www.atelier-icare.net/narration

Source / Exemple :


/*----------------------------------------------------------------------
Auteur : Phil Perret (philippe.perret@yahoo.fr)
Date : décembre 2009

Pré-requis : framework prototype.js (http://prototypejs.org/)

	FONCTIONS PERMETTANT DE MODIFIER EN JAVASCRIPT LES RÈGLES DES FEUILLES CSS EN FICHIER

Syntaxe

CSS.setProperty({fcss}, {selecteur}, {propriété}, {valeur}); où : {fcss} est le nom de la feuille de styles (string) {selecteur} est le selector (p.e. "body" ou "div.trait") {propriété} est la propriété (p.e. "font-size") {valeur} est la nouvelle valeur à appliquer à la propriété, p.e. "12pt"

Requis

ATTENTION : IL FAUT QUE LES IMPLÉMENTATIONS DES FEUILLES DE STYLES DANS LE DOCUMENT AIENT RESPECTÉES LA RÈGLE SUIVANTE : Les fichiers css doivent avoir été implémentées avec : <link id="css-{nom du fichier}" index="{index du fichier}" rel="stylesheet" type="text/css" href="{dossier}/{nom fu fichier}" />'; {index du fichier} doit correspondre à l'index de la feuille de style dans le document. Si la relève des feuilles est faite en automatique en PHP, il suffit d'avoir une variable $icss qu'on incrémente. Note : c'est l'index qui permet d'atteindre les différentes feuilles de style, par : document.styleSheets[index] NB : on pourrait tout aussi bien faire une lecture du DOM pour relever les correspondances index<->feuille de styles, mais je préfère personnellement l'implémentation "en dur" à la création à la volée du code par php. ----------------------------------------------------------------------*/ var CSS = { setProperty: function (fcss, selecteur, classe, valeur){ /*=== Permet de changer la balise (selector) SELECTEUR dans la feuille de style FCSS, en mettant la propriété CLASSE à la valeur VALEUR. ===*/ if (!this[fcss]) { this.getCss(fcss); if (!CSS[fcss]) return alert("Impossible de trouver la feuille de style voulue."); } if (!this[fcss]['is_defined']){ this.getSelectorOfCss(fcss); } var Rule = this[fcss][selecteur] ; if (!Rule) return alert("La feuille a été trouvée, mais impossible de mettre la main sur le sélecteur `"+selecteur+"`&#8230;"); // On applique la propriété Rule.style.setProperty(classe, valeur, null); }, getCss: function( fcss ){ var index = $('css-'+fcss).readAttribute('index'); this[fcss] = document.styleSheets[parseInt(index, 10)]; }, getSelectorOfCss: function(fcss){ var dcss = this[fcss] ; var drule; for(var i=0, len=dcss.cssRules.length; i<len; i++){ drule = dcss.cssRules[i]; this[fcss][drule.selectorText] = drule ; this[fcss][drule.selectorText]['index'] = i; } this[fcss]['is_defined'] = true ; }, }

Conclusion :


Bien entendu, si `CSS` est déjà une de vos variables, constantes ou fonction, il suffit de renommer la classe ci-dessus (p.e. CSS -> NEWCSS) .

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
jeudi 19 février 2009
Statut
Membre
Dernière intervention
13 janvier 2010

Salut @jdmcreator, un grand merci pour ta proposition.
mais je n'en ai pas besoin. une lecture du DOM peut facilement récupérer les adresses et les indices, c'est élémentaire. mais comme je relève toujours mes feuilles en php pour implémenter le '<link… />', c'est plus facile comme ça (en mode débuggage, parce que sinon j n'ai qu'un seul css).
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
J'avais écrit un code pour récupérer les adresses des feuilles CSS dans le document peut importe la façon, y compris @import. Si tu veux, je peux te passer le code

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.