className et feuille de style externe

**Mistic100** · 03/01/2010, 12h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 03/01/2010, 12h57

ç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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Mistic100** · 03/01/2010, 12h58

Mais encore ?

**SpaceFrog** · 03/01/2010, 13h04

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

**Mistic100** · 03/01/2010, 13h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 03/01/2010, 13h37

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Mistic100** · 07/01/2010, 19h58

en effet.... mais malheureusement ça ne change rien si je met un autre nom pour la variable

**kernelfailure** · 08/01/2010, 00h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 08/01/2010, 08h27

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

obj.className=nomdecalsse

**kernelfailure** · 08/01/2010, 10h49

bah oui, normallement les deux fonctionnent

**Mistic100** · 08/01/2010, 16h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il faut en fait mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input[type=text].InputError {
	border:1px solid #f00;
}

className et feuille de style externe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager