Changer la couleur d'une div dynamiquement JS
loulou
-
magicshark Messages postés 402 Date d'inscription Statut Membre Dernière intervention -
magicshark Messages postés 402 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je travaille sur la création d'une page web. Celle-ci est constituée de plusieurs division, j'aimerais rendre l'une d'elle dynamique en permettant de changer sa couleur. En faisant quelques recherches j'ai découvert ce script qui permet de modifier le background de ma page web or je souhaiterais le faire pour le background de ma division.
<html>
<!-- Author: HackTrack -->
<head>
<title>Démo de sélection de couleur de fond</title>
<script language="javascript" type="text/javascript">
function changeBackgroundColor(elm){
window.status=elm.style.backgroundColor;
document.body.style.backgroundColor=elm.style.backgroundColor;
}
</script>
<style>
table, tr, td{
margin: 0px;
padding:0px;
border: solid 1px #0f0f0f;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">Choisissez la couleur de fond</th>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #000000;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #111111;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #222222;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #333333;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #444444;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #555555;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #666666;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #777777;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #888888;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #999999;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #aaaaaa;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #bbbbbb;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #cccccc;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #dddddd;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #eeeeee;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #ffffff;"></div></td>
</tr>
</table>
</body>
</html>
J'imagine que ca tourne autour de changeBackgroundColor mais je ne sais vraiment pas comment faire !
Pourriez vous m'aider ? merci !
je travaille sur la création d'une page web. Celle-ci est constituée de plusieurs division, j'aimerais rendre l'une d'elle dynamique en permettant de changer sa couleur. En faisant quelques recherches j'ai découvert ce script qui permet de modifier le background de ma page web or je souhaiterais le faire pour le background de ma division.
<html>
<!-- Author: HackTrack -->
<head>
<title>Démo de sélection de couleur de fond</title>
<script language="javascript" type="text/javascript">
function changeBackgroundColor(elm){
window.status=elm.style.backgroundColor;
document.body.style.backgroundColor=elm.style.backgroundColor;
}
</script>
<style>
table, tr, td{
margin: 0px;
padding:0px;
border: solid 1px #0f0f0f;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">Choisissez la couleur de fond</th>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #000000;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #111111;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #222222;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #333333;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #444444;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #555555;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #666666;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #777777;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #888888;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #999999;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #aaaaaa;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #bbbbbb;"></div></td>
</tr>
<tr>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #cccccc;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #dddddd;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #eeeeee;"></div></td>
<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #ffffff;"></div></td>
</tr>
</table>
</body>
</html>
J'imagine que ca tourne autour de changeBackgroundColor mais je ne sais vraiment pas comment faire !
Pourriez vous m'aider ? merci !
A voir également:
- Changer la couleur d'une div dynamiquement JS
- Changer dns - Guide
- Changer la couleur de la barre des taches - Guide
- La boite a couleur - Télécharger - Divers Photo & Graphisme
- Excel cellule couleur si condition texte - Guide
- Changer carte graphique - Guide
