تقدم هذه المقالة مبدأ معالجة وظيفة Skinning Page (* يجب اختبارها واستخدامها في بيئة الخادم*) للرجوع إليها. المحتوى المحدد كما يلي
مبدأ:
1. إزالة الجلد هو جعل الصفحة تستخدم إعداد نمط غير مستخدم
2. نقوم بصنع ملفات صفائح أنماط متعددة بناءً على منطقة استبدال الجلد.
3. احصل على معرف الارتباط
4. قم بتعديل سمة HREF للرابط لتغيير ورقة النمط
5. استخدم ورقة الأنماط دون استخدامها ، فقط استخدم نمط البشرة المقابل
6. استخدام مبدأ المستخدم لاستخدام تكنولوجيا ملفات تعريف الارتباط ، سيستخدم المستخدمون أيضًا آخر اختيار للبشرة
7. يجب أن تبدأ قراءة ملفات تعريف الارتباط في الصفحة لضمان تحميل CSS المقابل مسبقًا
<html> <head> <title> JS Page Skinning Function </title> <meta charset = "utf-8"> <link href = "public.css" rel = "stylesheet" type = "text/css"/> <link href = "1.css" rel = "styles" type = "text/" /. اختيار 7. اقرأ ملف تعريف الارتباط في بداية تحميل الصفحة ، مع التأكد من تحميل CSS المقابلة مسبقًا *// اقرأ ملف تعريف الارتباط ، وتغيير الجلد Var Skin = document.getElementById ("Skin") ؛ // الحصول على عنصر الارتباط var var cookieval = document.cookie ؛ var skipval = readcookie ("skin") ؛ if (! skipval) {// إذا لم يكن ملف تعريف الارتباط skin.href = "1.css" ؛} آخر {skin.href = skipval+". var skin2 = document.getElementById ("skin2") ؛ var skin3 = document.getElementById ("skin3") ؛ var days = 30 ؛ // قم بتعيين وقت انتهاء الصلاحية ، var exp = new date () ؛ exp.Settime (exp.getTime () + Days*24*60*60*1000) ؛ skin1.onclick = function () {skin.href = "1.css" ؛ document.cookie = "skin = 1 ؛ expires ="+exp.toutcString () ؛ } ؛ skin2.onclick = function () {skin.href = "2.css" ؛ document.cookie = "skin = 2 ؛ expires ="+exp.toutcString () ؛ } ؛ skin3.onclick = function () {skin.href = "3.css" ؛ document.cookie = "skin = 3 ؛ expires ="+exp.toutcString () ؛ ؛ var arrkv = cookieval.split ("؛") ؛ لـ (var i = 0 ؛ i <arrkv.length ؛ i ++) {var itemc = arrkv [i] .split ("=") ؛ if (itemC [0] == KEY) {skinVal = itemC [1] ؛ }آخر{ }؛ } ؛ إرجاع skinval ؛} ؛ </script> </head> <body> <viv> <viv> <div> <input type = "button" value = "skin1" id = "skin1"/> <input content2 </viv> <viv> أنا محتوى 3 </div> </viv> <viv> أنا معلومات التيل </div> </body> </html>رمز المصدر تنزيل:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.