MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCRIPT

/*----------------------------------------------------------------------
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 ;
	},
}