Objet Style
L'objet JavaScript Style
Exemple: proposer de changer la couleur de fond
<script>
//couleur de fond
<!--
col = new Array; colf = new Array;
col[0] = "#c0c0c0"; colf[0] = "> Argent";
col[1] = "gold"; colf[1] = "> Or";
col[2] = "indianred"; colf[2] = "> Rouge Indien";
col[3] = "navy"; colf[3] = "> Bleu marine";
col[4] = "#7189AB"; colf[4] = "> Bleu matin";
col[5] = "#ffffcc"; colf[5] = "> Jaune paille";
col[6] = "maroon"; colf[6] = "> Marron";
col[7] = "white"; colf[7] = "> Blanc";
col[8] = ""; colf[8] = "> Défaut (Transparent)";
// -->
</script>
<select id="couleur" onchange="document.body.style.background = getElementById('couleur').options[getElementById('couleur').selectedIndex].value">
<option value="ffffff">Choix de couleur:</option><br>
<script>
a=0;
while (a!=9){
document.write('<option value="' + col[a] + '">' + colf[a] + '</option>\n');
a++
}</script>
</select>
//couleur de fond
<!--
col = new Array; colf = new Array;
col[0] = "#c0c0c0"; colf[0] = "> Argent";
col[1] = "gold"; colf[1] = "> Or";
col[2] = "indianred"; colf[2] = "> Rouge Indien";
col[3] = "navy"; colf[3] = "> Bleu marine";
col[4] = "#7189AB"; colf[4] = "> Bleu matin";
col[5] = "#ffffcc"; colf[5] = "> Jaune paille";
col[6] = "maroon"; colf[6] = "> Marron";
col[7] = "white"; colf[7] = "> Blanc";
col[8] = ""; colf[8] = "> Défaut (Transparent)";
// -->
</script>
<select id="couleur" onchange="document.body.style.background = getElementById('couleur').options[getElementById('couleur').selectedIndex].value">
<option value="ffffff">Choix de couleur:</option><br>
<script>
a=0;
while (a!=9){
document.write('<option value="' + col[a] + '">' + colf[a] + '</option>\n');
a++
}</script>
</select>
Attention, la mention de feuilles de style
background-color
s'écrit en javascript background
Autre exemple (cliquez dans la zone de texte) :
<script>
function fondcolor() { document.getElementById('nom').style.background = '#ffffcc'; }
</script>
<input type="text" id="nom" onfocus="fondcolor();" onblur="this.style.background = '';" />
function fondcolor() { document.getElementById('nom').style.background = '#ffffcc'; }
</script>
<input type="text" id="nom" onfocus="fondcolor();" onblur="this.style.background = '';" />
Les méthodes de l'objet Style
• getAttribute() : rechercher une mention de feuilles de style
• removeAttribute() : retirer une mention de feuille de style
• setAttribute() : insérer une mention de feuille de style