11548 sujets

JavaScript, DOM et API Web HTML5

Onclick change class pour autre class

Bonjour, je cherche a faire un onclick qui change de class mais je ne veux pas utiliser de ID puisque je vais avoir plusieurs changement a faire dans une page.

Voici un code qui fonctionne bien mais je ne sais pas comment l'utiliser sans passer par un ID.


<html> 
<head> 
<style> 
.buttonType1 { 
color : green; 
} 
.buttonType2 { 
color : red; 
} 
</style> 
<script language="javascript"> 
function change_class() { 
var btn = document.getElementById("btnTest"); 
btn.className= "buttonType2"; 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Test" class="buttonType1" onclick="change_class()" id="btnTest"> 
</form> 
</body> 
</html>


merci
Tu ne passe pas ici par un ID mais par des CLASSES. Tu peux donc réutiliser ces classes dans la suite de ton code sans entrer en conflit avec les précédentes.
Le plus simple pour ton problème est de passer this en paramètre à ta fonction et de changé son className:


<html> 
<head> 
<style> 
.buttonType1 { 
color : green; 
} 
.buttonType2 { 
color : red; 
} 
</style> 
<script language="javascript"> 
function change_class(btn) { 
btn.className= "buttonType2"; 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Test" class="buttonType1" onclick="change_class(this)" id="btnTest"> 
</form> 
</body> 
</html>
C'est gentil, ce que je voudrais faire en fait c'est un menu select qui s'agrandit lorsqu'on click dessus et qui revient à sa grandeur original lorsqu'on est out.

Qu'est-ce qui me manque dans mon code?


<html> 
<head> 
<style> 
.buttonType1 { 
color : green; 
width:50px;
} 
.buttonType2 { 
color : red; 
width:100px;
} 
</style> 
<script language="javascript"> 
function change_class(btn) { 
btn.className= "buttonType2"; 
} 
</script> 
</head> 
<body> 
<form> 
<select id="" class="buttonType1" onfocus="change_class(this)">
<option value="" selected="selected">choix</option>
<option value="">choix 2</option>
</select>
</form> 
</body> 
</html>
le plus simple serait d'utiliser un framework comme jQuery :] ta des animations toute faite dessus Smiley smile
Sujet clos
Aller à