Javascript : exemples avec le code source

I - Menu déroulant

Choix d'un style

Taille du texte :
Couleur du texte :
Texte

Code html

<html>
<head>
<script language="javascript">
function changetaille() {
document.getElementById('texte').style.fontSize = document.getElementById('listeTaille').options[ document.getElementById('listeTaille').selectedIndex ].text+'px';
}
function changecouleur() {
document.getElementById('texte').style.color = document.getElementById('listeCouleur').options[ document.getElementById('listeCouleur').selectedIndex ].value;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td height="40" align="center">Taille du texte :
<select name="liste" size="1" id="listeTaille" onchange="changetaille()">
<option selected>10</option>
<option>16</option>
<option>24</option>
</select>
</td>
</tr>
<tr>
<td align="center">Couleur du texte :
<select name="liste" size="1" id="listeCouleur" onchange="changecouleur()">
<option selected style="color:#000000" value="#000000">Noir</option>
<option style="color:#FF0000" value="#ff0000">Rouge</option>
<option style="color:#00FF00" value="#00ff00">Vert</option>
<option style="color:#0000FF" value="#0000ff">Bleu</option>
<option style="color:#FFFF00" value="#ffff00">Jaune</option>
<option style="color:#66FFFF" value="#66ffff">Cyan</option>
<option style="color:#FF00FF" value="#ff00ff">Magenta</option>
</select>
</td>
</tr>
<tr>
<td height="40" align="center">
<div id="texte" style="font-weight:bold; font-size:10px">Texte</div>
</td>
</tr>
</table>
</body>
</html>
Validé XHTML 1.1    Validé CSS