This article introduces the principle of processing the JS page skinning function (* needs to be tested and used in a server environment*) for your reference. The specific content is as follows
principle:
1. Skin removal is to make the page use an unused style setting
2. We make multiple style sheet files based on the skin replacement area.
3. Get the link id
4. Modify the href attribute of the link to change the style sheet
5. Use the style sheet without using it, just use the corresponding skin style
6.Using the user principle of using cookie technology, users will also use the last skin selection
7. Reading cookies must start loading at the page to ensure that the corresponding skin css is loaded in advance
<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="stylesheet" type="text/css" id="skin" /><script type="text/javascript"> /*JS page skinning function processing principle 1. Skin replacement is to set the page without using style settings 2. We make the place to be replaced into multiple style sheet files according to the skin without using it 3. Get the id of the link 4. Modify the href attribute of the link to change the style sheet 5. Using the user principle of no using style sheet, that is, use the corresponding skin style 6. Using the user's principle of using cookie technology, the user will use the last skin selection 7. Read the cookie at the beginning of the page loading, ensuring that the corresponding skin css is loaded in advance */ // Read the cookie, and skin change var skin=document.getElementById("skin");//Get the link element var cookieval=document.cookie; var skipval=readcookie("skin"); if(!skipval){//If the cookie does not have record skin.href="1.css";}else{ skin.href=skipval+".css";//There is records};window.onload=function(){ //Click the button to replace the skin var skin1=document.getElementById("skin1"); var skin2=document.getElementById("skin2"); var skin3=document.getElementById("skin3"); var Days = 30; //Set the expiration time, 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(); };};//Read the specified value of cookie function readcookie(key){ var skinval=false; var arrkv=cookieval.split(";"); for(var i=0;i<arrkv.length;i++){ var itemc=arrkv[i].split("="); if(itemc[0]==key){ skinval=itemc[1]; }else{ }; }; return skinval;};</script></head><body><div> <div> <input type="button" value="skin1" id="skin1" /> <input type="button" value="skin2" id="skin2" /> <input type="button" value="skin3" id="skin3" /> </div></div><div> <div>I am content1</div> <div>I am content2</div> <div>I am content3</div></div><div>I am tail information</div></body></html>Source code download: http://xiazai.VeVB.COM/201607/yuanma/jschangeskin(VeVB.COM).rar
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.