JSPRO1 / JS Modifiez dynamiquement l'intégralité du style de page HTML (Skinning) .html
La copie de code est la suivante:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Style de page dynamique </TITME>
<link href = "css / bleu.css" rel = "Stylesheet" id = "myLink" />
<script type = "text / javascript">
fonction gel (id) {
return document.getElementById (id);
}
window.onload = function () {
// remplace le fichier CSS
var lis = gel ("ulist"). ChildNodes;
pour (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
gel ("myLink"). href = "css /" + this.classname + ".css";
};
}
}
};
</cript>
</ head>
<body>
<div>
<span> Modifiez le style de la page entière </span> <br/>
<input type = "text" id = "txt" />
<input type = "bouton" value = "soumi" />
</div>
<ul id = "ulist" style = "text-décoration: aucun; marge-top: 100px;">
<li style = "Affichage: bloc; largeur: 30px; hauteur: 20px; fond-couleur: rouge;"> </li>
<li style = "Affichage: bloc; largeur: 30px; hauteur: 20px; fond-couleur: bleu"> </li>
</ul>
</docy>
</html>
jspro1 / css / red.css
La copie de code est la suivante:
* {
marge: 0px; rembourrage: 0px;
}
corps {
Color d'arrière-plan: #eeeeee;
}
portée {
Couleur: rouge;
}
#SMS {
Couleur: "Border: 1px solide # 7D1515;
}
.btn {
Color en arrière-plan: # A52A2A; Border: Aucun; Couleur: Blanc; Largeur: 100px; hauteur: 28px;
}
jspro1 / css / bleu.css
La copie de code est la suivante:
* {
marge: 0px; rembourrage: 0px;
}
corps {
Color d'arrière-plan: #eeeeee;
}
portée {
Couleur: bleu;
}
#SMS {
Couleur: # 0000CD; Border: 1px solide # 006400;
}
.btn {
Color d'arrière-plan: # 0000CD; Border: Aucun; Couleur: Blanc; Largeur: 100px; hauteur: 28px;
}