Tip: Implement multiple CSS stylesheet switches on the same Web page

css| Tips | web | Style sheet styles and data separation bring more than just the standard, and since the style is separated from the data, the style switch is taken for granted! But there are so few Chinese tutorials on the internet! So I collected a part of the Chinese and foreign web site has been achieved by the technical data compiled for netizens reference.

the first thing to have is a CSS file with different content (preferably each file represents a style, or represents the part that needs to be changed). Here are three examples:

The first is a red CSS file (red.css) CSS with the following contents:
body {background-color:red;}

The second is the green CSS file (green.css) CSS with the following contents:
body {background-color:green;}

The third is the background of the yellow CSS file (yellow.css) CSS content is:
body {background-color:yellow;}

then add the three CSS links to the Xthml file
<link rel= "Alternate stylesheet href=" Red.css "mce_href=" Red.css "type=" text/css "title=" Red "media=" screen, Projection "/>
<link rel= "stylesheet" href= "Green.css" "mce_href=" Green.css "type=" text/css "title=" green "media=" screen, Projection "/>
<link rel= "Alternate stylesheet href=" Yellow.css "mce_href=" Yellow.css "type=" text/css "title=" Yellow "media=" screen, projection "/>

In addition to the title of these three, there is a different place, that is rel. The first and third are alternate stylesheet only the second is stylesheet. The second one is the style of course.

below the link to import a JS file to control this style switch
function Setactivestylesheet (title) {
var i, a, main;
if (title) {
for (i=0; (A = document.getelementsbytagname (' link ') [i]); i++) {
if (A.getattribute (' rel '). IndexOf (' style ')!=-1 && a.getattribute (' title ')) {
A.disabled = true;
if (A.getattribute (' 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;
}

Add three toggle buttons in the right place
<a href= "javascript:void ()" title= "Red style" ></a>
<a href= "javascript:void ()" title= "Green style" ></a>
<a href= "javascript:void ()" title= "Yellow style" ></a>
<a href= "javascript:void ()" title= "no Style" ></a>
All right, let's release the pilot test for three toggle links! Have you switched the style?

Addendum: JS document with memory function
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.getattribute ("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*1000));
var expires = "; Expires= "+date.togmtstring ();
}
else expires = "";
Document.cookie = name+ "=" +value+expires+ ";
path=/";
}

function Readcookie (name) {
var Nameeq = name + "=";
var ca = Document.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? Cookies:
Getpreferredstylesheet ();
Setactivestylesheet (title);
}

Window.onunload = function (e) {
var title = Getactivestylesheet ();
Createcookie ("style", title, 365);
}

var cookie = Readcookie ("style");
var title = cookie? Cookies:
Getpreferredstylesheet ();
Setactivestylesheet (title);