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> نمط الصفحة الديناميكي </title>
<link href = "css/blue.css" rel = "STYLESHEET" id = "myLink"/>
<script type = "text/javaScript">
وظيفة هلام (معرف) {
return document.getElementById (id) ؛
}
window.onload = function () {
// استبدل ملف CSS
var lis = gel ("yerist"). childnodes ؛
لـ (var i = 0 ؛ i <lis.length ؛ i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
هلام ("myLink"). href = "css/" + this.className + ".css" ؛
} ؛
}
}
} ؛
</script>
</head>
<body>
<viv>
<span> تعديل نمط الصفحة بأكملها </span> <br/>
<type type = "text" id = "txt"/>
<نوع الإدخال = "زر" value = "إرسال"/>
</div>
<ul id = "elist" style = "decoration text: none ؛ hargin-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 ؛
}
جسم {
خلفية اللون: #EEEEE ؛
}
فترة {
اللون: أحمر.
}
#رسالة قصيرة {
اللون: "الحدود: 1 بكسل Solid #7d1515 ؛
}
.btn {
خلفية اللون: #A52A2a ؛ الحدود: لا شيء ؛ اللون: أبيض ؛ العرض: 100px ؛ الارتفاع: 28px ؛
}
JSPRO1/CSS/Blue.CSS
نسخة الكود كما يلي:
* {
الهامش: 0px ؛ الحشو: 0px ؛
}
جسم {
خلفية اللون: #EEEEE ؛
}
فترة {
اللون: الأزرق.
}
#رسالة قصيرة {
اللون: #0000CD ؛ الحدود: 1 بكسل Solid #006400 ؛
}
.btn {
خلفية اللون: #0000CD ؛ الحدود: لا شيء ؛ اللون: أبيض ؛ العرض: 100px ؛ الارتفاع: 28px ؛
}