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

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

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)