Dynamic html-css
Soyez le premier à donner votre avis sur cette source.
Snippet vu 15 027 fois - Téléchargée 30 fois
Contenu du snippet
Manipulation de formulaire onMouseOver et Out
Changements de présentation du formulaire.
Changements de valeur.
Par modification en ligne d'une table de CSS.
La syntaxe de base du javascript est utilisée ici pour les références, c'est à dire les numéros à partir de 0.
document.styleSheets[0].rules[2] représentant le 3ème style défini de la première table.
Changements de présentation du formulaire.
Changements de valeur.
Par modification en ligne d'une table de CSS.
Source / Exemple :
<html>
<head>
<style type="text/css">
table {width: 100%; border-width:1%;padding: 1px; margin: 1px;}
td {border-width: 1px; border-color: white; border-style: solid;color: white;}
td.n1 {width : 30%;background-color: #661166;border-width:1px;border-color: white;}
td.n2 {width: 70%; background-color:#991166;border-width: 1px;}
p {font-size: 12px; font-family: Arial, sans-serif; font-weight: 300; margin : 1px; padding : 1px;color: white;}
body {background-color : white;}
.pol {font-size:16px; color: yellow}
input.texte1 {width:100%;background-color:#11357E; color: Yellow;}
input.texte2 {width:100%;background-color:#11357E; color: Yellow;}
input.texte3 {width:100%;background-color:#11357E; color: Yellow;}
</style>
<script>
function chg1() {
document.forms[0].elements[0].value = "Ceci est mon premier texte";
}
function ret1() {
document.forms[0].elements[0].value = "A propos 1";
}
function chg2() {
document.forms[0].elements[1].value = "Ceci est mon deuxième texte";
}
function ret2() {
document.forms[0].elements[1].value = "A propos 2";
}
function chg3() {
document.forms[0].elements[2].value = "Ceci est mon troisième texte";
}
function ret3() {
document.forms[0].elements[2].value = "A propos 3";
}</script>
</head>
<body>
<table cellspacing="1">
<tr>
<td class="n1" onMouseOver="document.styleSheets[0].rules[7].style.backgroundColor='yellow';document.styleSheets[0].rules[7].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px'; chg1();" onMouseOut="document.styleSheets[0].rules[7].style.backgroundColor='#11357E';document.styleSheets[0].rules[7].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px'; ret1();">
sujet
</td>
<td class="n2 pol"><form><p><input class="texte1" type="text" value="Texte principal"></p>
</td>
</tr>
<tr>
<td class="n1" onMouseOver="document.styleSheets[0].rules[8].style.backgroundColor='yellow';document.styleSheets[0].rules[8].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg2();" onMouseOut="document.styleSheets[0].rules[8].style.backgroundColor='#11357E';document.styleSheets[0].rules[8].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret2();">
sujet
</td>
<td class="n2 pol"><p><input class="texte2" type="text" value="Texte principal"></p>
</td>
</tr>
<tr>
<td class="n1" onMouseOver="document.styleSheets[0].rules[9].style.backgroundColor='yellow';document.styleSheets[0].rules[9].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg3();" onMouseOut="document.styleSheets[0].rules[9].style.backgroundColor='#11357E';document.styleSheets[0].rules[9].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret3();">
sujet
</td>
<td class="n2 pol"><p><input class="texte3" type="text" value="Texte principal"></p>
</form>
</td>
</tr>
<tr>
<td class="n1" colspan="3" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='#661166';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
Cette couleur de fond
</td>
</tr>
<tr>
<td colspan="3" class="n1" style="background-color:darkblue" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='darkblue'; document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
Celle-ci
</td>
</tr>
</table>
</body>
</html>
Conclusion :
La syntaxe de base du javascript est utilisée ici pour les références, c'est à dire les numéros à partir de 0.
document.styleSheets[0].rules[2] représentant le 3ème style défini de la première table.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.