Website skin-Changing code sample (JavaScript)

Recently, the company wants to develop a real estate network, the eldest brother to achieve cn.yahoo.com homepage of the skin function, these days to study a bit! Found a new skin replacement method, I do not know if anyone used before! Here to think about the idea, for your reference!


On the internet before beginning to find a related skin replacement Method! And I used the same basic! The method is as follows:
To pilot all skin files into a Web page:

<link rel= "Alternate stylesheet" href= "Red.css" type= "text/css" title= "Red" media= "screen, projection"/>
<link rel= "stylesheet" href= "Green.css" type= "text/css" title= "green" media= "screen, projection"/>
<link rel= "Alternate stylesheet" href= "Yellow.css" type= "text/css" title= "yellow" media= "screen, projection"/>

And then through JS Modify Link.disabled property for True/false, to achieve the switch style sheet! But once you have to import all the skin style files, for the site we want to develop, one import code too much, will affect the opening speed of the site!

Yesterday in Reading JS data found, modify the properties of Link.href, the browser will immediately load the new style sheet, do not do any trigger settings, this is what I want, the following specific ideas:

First prepare the corresponding skin style file, when the initial page load value calls the default skin, when the viewer clicks on the Change Skin button, with JS in the last link tag after loading a reference to the corresponding skin style file link tag, so that shows the skin, the browser will immediately show the effect of skin change. When you click on the next Skin button, just switch to the last loaded link tag's href attribute connection address!

Because of a reference to an external JS framework, so the code can not be fully posted, I put the core of the post!

copy content to clipboard

Code:

/* =shiftskin () Replace skin
---------------------------------------------------------------------------*/
function Shiftskin (skinname) {
Store Current skin Name
Nowskin = Skinname;
Format skin File connection address
var linkhref = '/styles/skin/' + skinname + '. css ';
Replace skin file
if (document.getElementById (' skin ')) {
Update skin File connection address if there is an element node referencing the skin
document.getElementById (' skin '). href = Linkhref;
} else {
Create a reference element node if there is no element node referencing the skin
var Linktag = NET. Byice. Dom.create (' link ');
NET. Byice. Dom.attr (Linktag, ' id ', ' skin ');
NET. Byice. Dom.attr (Linktag, ' type ', ' text/css ');
NET. Byice. Dom.attr (Linktag, ' rel ', ' stylesheet ');
Assign to current skin file connection address
NET. Byice. Dom.attr (Linktag, ' href ', linkhref);
Append the element node that references the skin
var links = document.getelementsbytagname (' link ');
NET. Byice. Dom.after (Links[links.length-1],linktag);
};
if (Skincookie) {
Skincookie.skinname = Skinname;
Skincookie.store (30, '/');
};
Call the connection node element highlighting the current skin
Isnowskin ();
};