className et feuille de style externe

Version imprimable

bonjour
je souhaite changer la classe d'un élément en javascript, j'ai bien sur trouvé className seulement ca ne fonctionne que si le style est déclaré dans l'en-tête de ma page et pas si je fais appel à une feuille css externe

j'ai cherché pendant une heure sur le net sans trouver, à ma grande surprise, la moindre remarque à ce propos.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <head> <title>Page test</title> <link rel="stylesheet" type="text/css" href="inc/style.css" /> <script type="text/javascript"> function InputIsInteger(Objet, Cible, Class){ if(Objet.value.toString().search("^[0-9]+$") == 0){ Objet.className = ''; document.getElementById(Cible).style.display = 'none'; }else{ Objet.className = Class; document.getElementById(Cible).style.display = ''; } } </script> </head> <body> <form> <input name="Numero" type="text" onkeyup="InputIsInteger(this, this.name, 'InputError')"/> <img id="Numero" src="img/cross.png" style="display:none;"/> </form> </body> </html>
Code:

1 2 3 .InputError { border:1px solid #f00; }

ça serait une nouveauté ...

Ton souci provient plutot de ton test ...

ta syntaxe de regExp n'est pas bonne il faut soit passer par new RegExp soit par la syntaxe avec le delimiteur /:

de plus pourquoi passer le name pour le reprendre en id ???
passer une seule fois this suffit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <head> <title>Page test</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> function InputIsInteger(Objet, Class){ if(Objet.value.toString().match(/^[0-9]+$/)){ Objet.className = ''; Objet.style.display = 'none'; }else{ Objet.className = Class; Objet.style.display = ''; } } </script> </head> <body> <form> <input name="Numero" type="text" onkeyup="InputIsInteger(this, 'InputError')"/> <img id="Numero" src="img/cross.png" style="display:none;"/> </form> </body> </html>

03/01/2010, 12h58
Mistic100

Mais encore ?
03/01/2010, 13h04
SpaceFrog

reponse précédente éditée ...

ce n'est pas l'input qui est caché/affiché, c'est l'image (qui a pour id le nom de l'input) ; avec ton code mon input disparait si la syntaxe est bonne, ce qui n'est pas l'effet voulu

de plus mon test fonctionnait (même si ce n'est pas le méthode optimale) puisque l'image s'affichait quand la valeur entrée n'était pas un nombre entier positif)

donc je repose ma question (avec un code épuré pour éviter tout malentendu)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <head> <link rel="stylesheet" type="text/css" href="inc/style.css" /> <script type="text/javascript"> function InputIsInteger(Objet, Class){ if(Objet.value.toString().match(/^[0-9]+$/)) Objet.className = ''; else Objet.className = Class; } </script> </head> <body> <form> <input type="text" onkeyup="InputIsInteger(this, 'InputError')"/> </form> </body> </html>

A priori il semblerait que IE n'aime pas un id = au name d'un autre objet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
	<title>Page test</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript">
		function InputIsInteger(Objet, Class){ 
 
			if(Objet.value.toString().match(/^[0-9]+$/) ||  Objet.value.length==0){
				Objet.className = '';
				document.getElementById(Objet.name+'img').style.display = 'none';
			}else{
				Objet.className = Class;
				document.getElementById(Objet.name+'img').style.display = 'block';
			}
		}
	</script>
</head>
 
<body>
 
 
	<input name="Numero" type="text" onkeyup="InputIsInteger(this,  'InputError')"/>
	<img id="Numeroimg" src="cross.jpg" style="display:none;" />
 
</body>
</html>

07/01/2010, 19h52
Mistic100

j'ai testé uniquement sous FF3.5, et avec mon second code il n'y a plus cette partie du code

problème toujours d'actualité donc

ps : merci toutefois pour l'astuce (ouais je sais pas bien dur à trouver mais bon) ca me servira ailleurs
07/01/2010, 19h54
Bovino

Comme le montre la coloration syntaxique, Class n'est pas très judicieux pour nommer un paramètre ;)
07/01/2010, 19h58
Mistic100

en effet.... mais malheureusement ça ne change rien si je met un autre nom pour la variable :(
08/01/2010, 00h34
kernelfailure
Je ne comprends pas bien ton histoire de 'css externe'. Peut-tu nous en dire plus ?
J'emploie ceci dans une classe qui charge sa propre css en modifiant le DOM.

Cette méthode est full DOM, il n'y a qu'un hack pour sa majesté IE.
Tu remplace cssClassName par le nom de ta variable, of course.
Code:

1 2 3 Objet.setAttributeNode(document.createAttribute('Class')); Objet.setAttribute('class', cssClassName); Objet.setAttribute('className', cssClassName); //IE Hack
08/01/2010, 08h27
SpaceFrog

je n'ai jamais rencontré de problème particulier avec

Code:

obj.className=nomdecalsse

8O
08/01/2010, 10h49
kernelfailure

bah oui, normallement les deux fonctionnent :koi:
08/01/2010, 16h33
Mistic100
problème résolu, bien que je comprenne pas bien le pourquoi du comment

explications :
j'ai défini un style général pour les input
Code:

1 2 3 4 input[type=text] { border:1px solid #ccc; -moz-border-radius:2px; }
ne connaissant pas toutes les subtilités du css j'avais défini ma classe de façon classique
Code:

1 2 3 .InputError { border:1px solid #f00; }
il faut en fait mettre
Code:

1 2 3 input[type=text].InputError { border:1px solid #f00; }
08/01/2010, 16h35
SpaceFrog

Code:

input[type=text].InputError

c'est crossbrowser ça ????
08/01/2010, 16h39
Mistic100

ca je sais pas mais ca marche sur FF et IE8 donc ca me suffit

il n'est pas question que je mette des classes à tous mes input pour faire plaisir aux vieux navigateurs

edit : attributes selectors implémentés en css 2.1, fonctionne pour tous les navigateurs et à partir de IE7
08/01/2010, 16h46
SpaceFrog

oui encore faut il mettre le bon doctype pour IE