1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Modifier ses feuilles de styles .css à la volée avec javascript

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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 369 fois - Téléchargée 18 fois

Commenter

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
phildepantin Messages postés 3 Date d'inscription jeudi 19 février 2009 Statut Membre Dernière intervention 13 janvier 2010
13 janv. 2010 à 09:16
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).
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
13 janv. 2010 à 02:11
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
S'inscrire maintenant

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.

Du même auteur (phildepantin)