How to achieve multi-style selection style real-time switching _ Experience Exchange

We in the production of the site, we hope that their site is multi-style, users can choose different styles according to their preferences, such a style can be a change in layout, can also be a difference in color, it may be specific to different user groups and customized style.
How can we achieve multi-style selection and style of real-time switching?
In fact, IE does not support this feature, we can completely hand over to the browser to complete, Firefox support this feature.
Let's say we have two sets of CSS, each enclosed in two different files: A. CSS and B.css. Then add the following two lines of XHTML code between

<link rel= "stylesheet" type= "Text/css" title= "Subject A" href= "a.css?7.1.34"/> <link rel= "Alternate stylesheet" Type= "Text/css" title= "Theme B" href= "b.css?7.1.34"/>

Then use your Firefox to open this page, select in the menu bar: View-page style, you should be able to see "theme a", "theme B" and can be selected in real-time.
We can use another method is the dynamic program to complete, such as ASP, PHP, JSP, and so on, the benefits are direct, efficient, good compatibility, can remember the user choice. The user's choice can be recorded in the cookie can also be directly written to the database, when the user again access, the direct call to the last access to the selected style. Specific production we do not detail here, you can follow our website www.52css.com, we will not regularly launch this aspect of the content.
What method should we use now? Let the browser choose the method, the main browser IE is not supported by the program script to implement? When my page is static, there is no database.
We can only choose to use JavaScript to fix it. Let's look at the following code:

function Setactivestylesheet (title) {var I, a, main; for (i=0; (A = document.getElementsByTagName ("link") [i]); i++) {if (A.getattribute ("rel"). IndexOf ("style")! =-1 && a.getattribute ("title")) {a.disabled = true; if (A.geta Ttribute ("title") = = title) a.disabled = false; }}} function Getactivestylesheet () {var i, A; for (i=0; (A = document.getElementsByTagName ("link") [i]); i++) {if (A.getattribute ("rel"). IndexOf ("style")! =-1 && a.getattribute ("title") &&!a.disabled) Return A.getattribute ("title"); } return null; } function Getpreferredstylesheet () {var i, A; for (i=0; (A = document.getElementsByTagName ("link") [i]); i++) {if (A.getattribute ("rel"). IndexOf ("style")! =-1 && a.getattribute ("rel"). IndexOf ("alt") = = 1 && A.getattribute ("title")) return A.getattribute ("title"); } return null; } function Createcookie (name,value,days) {if (days) {var date = new Date (); Date.settime (Date.gettime () + (days*24*60*60*1 000)); var expires = "; Expires= "+date.togmtstring (); } else expires = ""; Documents.cookie = name+ "=" +value+expires+ "; path=/"; } function Readcookie (name) {var Nameeq = name + "="; var ca = Documents.cookie.split (';'); for (Var i=0;i < ca.length; i++) {var c = ca[i], while (c.charat (0) = = ") c = c.substring (1,c.length); if (C.indexof (nameeq) = = 0) return c.substring (Nameeq.length,c.length); } return null; } window.onload = function (e) {var cookie = Readcookie ("style"); var title = cookie? Cookie:getpreferredstylesheet (); Setactivestylesheet (title); } window.onunload = function (e) {var title = Getactivestylesheet (); Createcookie ("style", title, 365);} var cookie = Rea Dcookie ("style"); var title = cookie? Cookie:getpreferredstylesheet (); Setactivestylesheet (title);

The above code is the implementation of multi-style selection, real-time style switching JavaScript script, we can save the above code as a JS file, the required page directly referenced:

<script type= "Text/javascript" src= "cssturn.js?7.1.34" ></script>

Of course, you can also directly write the above code directly inside the page.
There are three styles in our style, one of which is the default of two other styles. Bring these three CSS files into the paging file:

<link rel= "stylesheet" type= "Text/css" href= "css.css?7.1.34"/> <link rel= "stylesheet" type= "Text/css" href= " aaa.css?7.1.34 "title=" aaa "/> <link rel=" stylesheet "type=" Text/css "href=" bbb.css?7.1.34 "title=" BBB "/>

Well, we can now add the link to the switch style in the page:

<a href= "#" onclick= "Setactivestylesheet (', 1); return false; " > Default Style-white </a> <a href= "#" onclick= "Setactivestylesheet (' aaa ', 1); return false; " > Style one-blue </a> <a href= "#" onclick= "Setactivestylesheet (' BBB ', 1); return false; " > Style two-orange </a>

Now we're done, test our results and see how it works.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "<a rel=" nofollow "href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-strict.dtd "target=" _blank ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>" > 
 