JSPRO1/JS ปรับเปลี่ยนสไตล์หน้า HTML ทั้งหมดแบบไดนามิก (Skinning) .html
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> สไตล์เพจพลวัต </ชื่อเรื่อง>
<link href = "css/blue.css" rel = "stylesheet" id = "myLink"/>
<script type = "text/javascript">
ฟังก์ชันเจล (id) {
ส่งคืน document.getElementById (id);
-
window.onload = function () {
// แทนที่ไฟล์ CSS
var lis = gel ("ulist"). เด็ก;
สำหรับ (var i = 0; i <lis.length; i ++) {
ถ้า (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
gel ("myLink"). href = "css/" + this.classname + ".css";
-
-
-
-
</script>
</head>
<body>
<div>
<span> แก้ไขรูปแบบของทั้งหน้า </span> <br/>
<อินพุต type = "text" id = "txt"/>
<อินพุต type = "ปุ่ม" value = "ส่ง"/>
</div>
<ul id = "ulist" style = "การตกแต่งข้อความ: ไม่มี; margin-top: 100px;">
<li style = "display: block; width: 30px; ความสูง: 20px; พื้นหลังสี: สีแดง;"> </li>
<li style = "display: block; width: 30px; ความสูง: 20px; พื้นหลังสี: สีน้ำเงิน"> </li>
</ul>
</body>
</html>
JSPRO1/CSS/RED.CSS
การคัดลอกรหัสมีดังนี้:
-
มาร์จิ้น: 0px; การตอบสนอง: 0px;
-
ร่างกาย {
พื้นหลังสี: #eeeeee;
-
ช่วง {
สี: สีแดง;
-
#txt {
สี: "เส้นขอบ: 1px Solid #7D1515;
-
.BTN {
พื้นหลังสี: #a52a2a; ชายแดน: ไม่มีสี: สีขาว; ความกว้าง: 100px; ความสูง: 28px;
-
jspro1/css/blue.css
การคัดลอกรหัสมีดังนี้:
-
มาร์จิ้น: 0px; การตอบสนอง: 0px;
-
ร่างกาย {
พื้นหลังสี: #eeeeee;
-
ช่วง {
สี: สีน้ำเงิน;
-
#txt {
สี: #0000cd; ขอบ: 1px solid #006400;
-
.BTN {
พื้นหลังสี: #0000cd; ชายแดน: ไม่มีสี: สีขาว; ความกว้าง: 100px; ความสูง: 28px;
-