JSPRO1/JS secara dinamis memodifikasi seluruh gaya halaman HTML (Skinning) .html
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<Title> gaya halaman dinamis </iteme>
<tautan href = "css/blue.css" rel = "stylesheet" id = "mylink"/>
<type skrip = "Teks/JavaScript">
fungsi gel (id) {
return document.getElementById (id);
}
window.onload = function () {
// Ganti file CSS
var lis = gel ("ulist"). Childnodes;
untuk (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> ubah gaya seluruh halaman </span> <br/>
<input type = "text" id = "txt"/>
<input type = "tombol" value = "kirim"/>
</div>
<ul id = "ulist" style = "Text-Decoration: none; margin-top: 100px;">
<li style = "display: block; lebar: 30px; tinggi: 20px; latar belakang-warna: merah;"> </li>
<li style = "display: block; lebar: 30px; tinggi: 20px; latar belakang-warna: biru"> </li>
</ul>
</body>
</html>
JSPRO1/CSS/RED.CSS
Salinan kode adalah sebagai berikut:
* {
margin: 0px; padding: 0px;
}
tubuh {
latar belakang-warna: #eeeeee;
}
Span {
Warna: Merah;
}
#txt {
Warna: "Border: 1px Solid #7D1515;
}
.btn {
Latar Belakang-Color: #A52A2A; Border: None; Warna: Putih; Lebar: 100px; Tinggi: 28px;
}
JSPRO1/CSS/BLUE.CSS
Salinan kode adalah sebagai berikut:
* {
margin: 0px; padding: 0px;
}
tubuh {
latar belakang-warna: #eeeeee;
}
Span {
Warna: Biru;
}
#txt {
Warna: #0000cd; Border: 1px Solid #006400;
}
.btn {
Latar Belakang-Color: #0000cd; Border: None; Warna: Putih; Lebar: 100px; Tinggi: 28px;
}