Comment changer la couleur du fond en javascr
Fermé
soniadébutante2011
-
29 avril 2011 à 15:47
sheik54 Messages postés 76 Date d'inscription jeudi 24 janvier 2008 Statut Membre Dernière intervention 29 avril 2011 - 29 avril 2011 à 16:59
sheik54 Messages postés 76 Date d'inscription jeudi 24 janvier 2008 Statut Membre Dernière intervention 29 avril 2011 - 29 avril 2011 à 16:59
A voir également:
- Comment changer la couleur de son bitmoji
- Changer dns - Guide
- Piratage facebook changer mot de passe - Guide
- Changer la couleur de la barre des taches - Guide
- Changer clavier qwerty en azerty - Guide
- Somme si couleur - Guide
1 réponse
sheik54
Messages postés
76
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
29 avril 2011
11
29 avril 2011 à 16:59
29 avril 2011 à 16:59
Bonjour,
Pour cela tu as 2 choix. Soit tu passe par l'élément JavaScript
Soit tu passe par une classe (mais dans ce cas là il faut modifier le code HTML.
De plus, les lignes suivantes sont fausses :
Pour chaque ligne voici la ligne corrigée :
Voici donc en dessous la page qui fonctionne. Je te conseille très fortement de lire et de comprendre toute la page avant lundi ;)
Pour cela tu as 2 choix. Soit tu passe par l'élément JavaScript
getElementsByTagName.
Soit tu passe par une classe (mais dans ce cas là il faut modifier le code HTML.
De plus, les lignes suivantes sont fausses :
<span onclick="this.style.backgroundColor='red'"></span>
document.getElementById(elt).style.backgroundColor = "red";
<li <span onClick="changeFond('p')='red'">des paragraphes</span></li>
Pour chaque ligne voici la ligne corrigée :
Ligne 1 : Cette ligne n'existe pas en javascript, c'est du code HTML Ligne 2 : Tu veux modifier la couleur de fond de l'élément dont le ID est le champs que tu donnes. Ceci est faux, tu veux changer la couleur de tout les éléments que tu passe en paramètres suivant leur types. Ligne 3 : Tu ne ferme pas la balise li et tu ouvre la balise span. C'est complétement faux : <li onClick="changeFond('p')='red'">des paragraphes</li> serais mieux.
Voici donc en dessous la page qui fonctionne. Je te conseille très fortement de lire et de comprendre toute la page avant lundi ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Éléments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" >
function changeFond(elt){
var node_list = document.getElementsByTagName(elt);
for (var i = 0; i < node_list.length; i++) {
node_list[i].style.backgroundColor = 'red';
}
}
</script></head>
<body>
<h1>Titre h1</h1>
<h2>Premier titre h2</h2>
<p>Paragraphe avec du <em>texte important</em>, du <strong>texte encore plus important</strong>... Et maintenant <em>une liste</em> !</p>
<ol>
<li>premier item</li>
<li>deuxième item</li>
<li>troisième item</li>
</ol>
<h2>Deuxième titre h2</h2>
<p>Petit paragraphe introductif</p>
<table summary="" >
<caption>Tableau de 3 lignes et 3 colonnes</caption>
<tr>
<td>Rien</td>
<th scope="col" id="c1">Titre de colonne</th>
<th scope="col" id="c2">Titre de colonne</th>
</tr>
<tr>
<th scope="row" id="l1">Titre de ligne</th>
<td id="t11">Rien</td>
<td id="t12">Rien</td>
</tr>
<tr>
<th scope="row" id="l2">Titre de ligne</th>
<td id="t21">Rien</td>
<td id="t22">Rien</td>
</tr>
</table>
<h2>Troisième titre</h2>
<p>Changer la couleur de fond...</p>
<ul>
<li onClick="changeFond('p');">des paragraphes</a></li>
<li onClick="changeFond('h2')">des titres h2</li>
<li onClick="changeFond('li')">des items de liste li</li>
</ul>
</body>
</html>
