Implementation of CSS style switching in Web pages

The style and data separation brings not only the simplicity of conforming to the standard, but the style of switching with data separation is taken for granted! But there are so few Chinese tutorials on the internet! Collected a part of the Chinese and foreign web site has been realized 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" 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"/>

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

　{
　 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="红色样式"></a>
<a href="javascript :void()"　title="绿色样式"></a>
<a href="javascript :void()"　title="黄色样式"></a>
<a href="javascript :void()"　title="没有样式"></a>

All right, let's release the pilot test for three toggle links! Have you switched the style?

Appendix: JS Document with memory function

{
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);