JSPRO1/JS modifizieren Sie dynamisch den gesamten HTML -Seitenstil (Skinning) .html
Die Codekopie lautet wie folgt:
<! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/>
<title> Dynamischer Seitenstil </title>
<link href = "css/blue.css" rel = "stylesheet" id = "mylink"/>
<script type = "text/javaScript">
Funktion Gel (id) {
return document.getElementById (id);
}
window.onload = function () {
// Ersetzen Sie die CSS -Datei
var lis = gel ("ulist"). Childnodes;
für (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodetype == 1) {
lis [i] .onclick = function () {
Gel ("mylink"). href = "css/" + this.className + ".css";
};
}
}
};
</script>
</head>
<body>
<div>
<span> Ändern Sie den Stil der gesamten Seite </span> <br/>
<Eingabe type = "text" id = "txt"/>
<input type = "button" value = "subieren"/>
</div>
<ul id = "ulist" style = "textdekoration: keine; margin-top: 100px;">
<li style = "Anzeige: Block; Breite: 30px; Höhe: 20px; Hintergrundfarbe: Rot;"> </li>
<li style = "Anzeige: Block; Breite: 30px; Höhe: 20px; Hintergrundfarbe: Blau"> </li>
</ul>
</body>
</html>
JSPRO1/CSS/RED.CSS
Die Codekopie lautet wie folgt:
* {{
Rand: 0px; Polsterung: 0px;
}
Körper {
Hintergrundfarbe: #eeeeeee;
}
Span {
Farbe: Rot;
}
#txt {
Farbe: "Border: 1px Solid #7d1515;
}
.BTN {
Hintergrundfarbe: #a52a2a; Grenze: Keine; Farbe: Weiß; Breite: 100px; Höhe: 28px;
}
JSPRO1/CSS/Blue.css
Die Codekopie lautet wie folgt:
* {{
Rand: 0px; Polsterung: 0px;
}
Körper {
Hintergrundfarbe: #eeeeeee;
}
Span {
Farbe: Blau;
}
#txt {
Farbe: #0000CD; Rand: 1PX Solid #006400;
}
.BTN {
Hintergrundfarbe: #0000CD; Rand: Keine; Farbe: Weiß; Breite: 100px; Höhe: 28px;
}