How to implement real-time switching of multiple style selection styles

When creating a website, we hope that our website has multiple styles. Users can choose different styles based on their preferences. Such styles can be layout changes, it can also be a difference in color or a style customized for different user groups.
How can we achieve real-time switching between multiple styles and styles?

In fact, ie does not support this function. We can leave it to the browser to complete it. Firefox supports this function.
Suppose we have two sets of CSS, which are respectively enclosed in two different files: A. CSS and B. CSS. Add the following two lines of XHTML between Code:

<LINK rel = "stylesheet" type = "text/CSS" Title = "theme a" href = "a.css"/>
<LINK rel = "alternate stylesheet" type = "text/CSS" Title = "Topic B" href = "B .css"/>

Then open the page with your Firefox and choose View> page style from the menu bar. You can see "theme a" and "theme B" and select it in real time.

Another method we can use is dynamicProgramSuch as ASP, PHP, JSP, etc. The benefits of doing so are direct, efficient, compatible, and user-friendly. The user's choice can be recorded in cookies or directly written into the database. When the user accesses the database again, the selected style of the last access is called directly. We will not detail the specific production here. You can follow our website www.52css.com and we will occasionally launch this content.

What should we do now? Mainstream Browser IE does not support the method selected by the browser; is it implemented by the program script? When my webpage is static, there is no database.
We can only deal with it using JavaScript. 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. getattribute ("title") = title) A. Disabled = false;
}
}
}

Function getactivestylesheet (){
VaR I,;
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,;
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 * 24x60*60*1000 ));
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 = readcookie ("style ");
VaR Title = cookie? COOKIE: getpreferredstylesheet ();
Setactivestylesheet (title );

The above code is a Javascript script for implementing multi-style selection and real-time style switching. We can save the above Code as a JS file and directly reference it on the required page:

<SCRIPT type = "text/JavaScript" src = "cssturn. js"> </SCRIPT>

Of course, you can also directly write the above code inside the page.
We have three styles, one of which defaults to the other two. Introduce these three CSS files into the page file:

<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>
<LINK rel = "stylesheet" type = "text/CSS" href = "aaa.css" Title = "AAA"/>
<LINK rel = "stylesheet" type = "text/CSS" href = "bbb.css" Title = "BBB"/>

Now we can add a link to the switching style on the page:

<A href = "#" onclick = "setactivestylesheet ('', 1); Return false; "> default style-white </a>
<A href = "#" onclick = "setactivestylesheet ('aaa', 1); Return false;"> style 1-blue </a>
<A href = "#" onclick = "setactivestylesheet ('bbb ', 1); Return false;"> style 2-orange </a>

Now we are done. Test the above results and see the results.Ttp: // www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd "target =" _ blank "> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< br/>Xmlns = "http://www.w3.org/1999/xhtml">

Http://www.52css.com/attachments/month_0701/r2007128164252.css "/>

Http://www.52css.com/attachments/month_0701/c2007128164223.css "Title =" AAA "/> Http://www.52css.com/attachments/month_0701/h2007128164239.css & quot; Title = & quot; BBB & quot;/>
Default style-white
Style 1-blue
Style 2-orange