Creation dynamique de classes css

Bonjour,

J'essaie de creer dynamiquement de nouvelles classes css en javascript/DOM. Cela marches tres bien avec ff, mais evidement il-y-a un soucis avec ie. quelq'un peur m'aider?

Voici mon code pour creer une nouvelle classe :

		var cl4 = 'input.contactInput { font-family: Arial, Helvetica, sans-serif; color: #015289; font-size: 10px; border-width:1px; border-style: solid; border-color: #015289; overflow: hidden; }';
		cl4 = document.createTextNode(cl4)
		S.appendChild(cl4);

		document.body.appendChild(S);	

La pauvre console d'erreur de ie me donne 'Demande d'accès à la méthode ou aux propriétés inattendue'.

P.S. : Quelq'un connait une bonne console d'erreurs pour ie?
Modifié par Krafton (19 Apr 2007 - 15:18)

Salut,

Pour ajouter une classe à la volée, il vaut mieux faire :

JS :

var oInput = document.getElementsByTagName('input')[0];
oInput.className = 'contactInput';

CSS :

@media screen, projection {

.contactInput
{
    font-family: Arial, Helvetica, sans-serif;
    color: #015289;
    font-size: .8em;
    border: 1px solid #015289;
}

}

Ca passe partout et tu laisses la présentation au CSS ce qui t'épargne une maintenance lourde parce que t'aurais éparpillé tes styles. Par ailleurs, tu conserves ainsi les possibilités que t'offre CSS (l'indication du media entre autres)
Modifié par koala64 (19 Apr 2007 - 16:00)

Merci bcp pour ton aide et ta reponse rapide koala64,

Ton approche tu probleme est judicieuse, seulement dans mon cas, il faut vraiment que je puisse definir une class, car je devrais l'appliquer a de nombreux elements.

Pour la solution que tu me propose je devrais definir le style pour chaque element. De plus je voudrais pouvoir etre independant d'un fichier css exterieurs, car je voudrais pouvoir modulariser mon code pour pouvoir le transporter facilement.

En cherchant un peu, j'ai fini par trouver un solution a mon probleme, je la mets en ligne ici dans l'espoir qu'elle puisse etre utile a d'autres.

		var S = document.createElement('style');
		S.setAttribute("type", "text/css");

		var cl1 = '.contactCol1 { float: left; width: 130px; height: 19px; }';
		if (S.styleSheet)
			{ S.styleSheet.cssText=cl1;}
		else
			{ 
				cl1 = document.createTextNode(cl1); 
				S.appendChild(cl1);
			}

		document.body.appendChild(S);

La premiere condition est pour ie, la deuxieme pour les autres.

Rectification,

		var S = document.createElement('style');
		S.setAttribute("type", "text/css");

		var style = '.contactCol1 { float: left; width: 130px; height: 19px; background-color:#123456; }';
		style = style+'.contactCol2 { float: left; width: 150px; height: 19px; background-color:#678991; }';
		style = style+'.contactCol3 { float: left; width: 200px; height: 19px; color:#FF0000; background-color: #345678; }';
		style = style+'.contactInput { font-family: Arial, Helvetica, sans-serif; color: #015289; font-size: 10px; border-width:1px; border-style: solid; border-color: #015289; overflow: hidden; }';


		if (S.styleSheet) 
			{   
    				S.styleSheet.cssText = style;
			} 
		else 
			{                
    				var T = document.createTextNode(style);
    				S.appendChild(T);
			}
		var H = document.getElementsByTagName('head')[0];
		H.appendChild(S);