Javascript : exemples avec le code source

F - Modification des styles

Couleur et taille d'un texte

Taille du texte : 7 10 16 24
Couleur du texte :  
Voici le texte

Code html

<html>
<head>
<script language="javascript">
function changetaille(taille) {
document.getElementById('texte').style.fontSize=taille+'px';
}
function changecouleur(couleur) {
document.getElementById('texte').style.color=couleur;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
Taille du texte : <a href="javascript:changetaille(7);">7</a> <a href="javascript:changetaille(10);">10</a> <a href="javascript:changetaille(16);">16</a> <a href="javascript:changetaille(24);">24</a>
</td>
</tr>
<tr>
<td align="center">
Couleur du texte : <a href="javascript:changecouleur('#000000');"><img src="noir.gif"></a> <a href="javascript:changecouleur('#FF0000');"><img src="rouge.gif"></a> <a href="javascript:changecouleur('#00FF00');"><img src="rouge.gif"></a> <a href="javascript:changecouleur('#0000FF');"><img src="bleu.gif"></a> <a href="javascript:changecouleur('#FF00FF');"><img src="magenta.gif"></a> <a href="javascript:changecouleur('#FFFF00');"><img src="cyan.gif"></a> <a href="javascript:changecouleur('#00FFFF');"><img src="jaune.gif"></a>
</td>
</tr>
<tr>
<td align="center">
<div id="texte" style="font-weight:bold; font-size:10px">Voici le texte</div>
</td>
</tr>
</table>
</body>
</html>
Validé XHTML 1.1    Validé CSS