We are in the production site, we hope that their site is more style, users can choose different styles according to their preferences, such style can be a change in the layout, can also be the difference in color, it may be for different user groups and special custom style.
How do we implement a real-time switch between multi style selection and style?
In fact, only IE does not support this function, we can completely to the browser to complete, Firefox support this feature.
Suppose we have two sets of CSS that are enclosed in two separate files: A. CSS and B.css. Then add the following two lines of XHTML code between
<link rel= "stylesheet" type= "Text/css" title= "theme A" href= "A.css"/>
<link rel= "Alternate stylesheet" type= "Text/css" title= "Theme B" href= "B.css"/>
Then use your Firefox to open this page, in the menu bar to choose: To view the-> page style, you should be able to see "theme a", "theme B" and can be selected in real time.
We can use the other method is dynamic program to complete, such as ASP, PHP, JSP, etc., the benefit is direct, efficient, good compatibility, can remember user choice. You can write the user's choice into a cookie or directly to the database, and when the user accesses it again, it invokes the previous access to the selected style. The specific production here we do not elaborate, you can pay attention to our website www.52css.com, we will not regularly launch this aspect of the content.
Now what method should we use? Let the browser choose the method, mainstream browser IE does not support, using program script to implement? When my Web page is static, there is no database.
We can only choose to use the JavaScript method to deal with 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.getattribute ("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 = "";
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 the implementation of the multi-style selection, real-time style switch JavaScript script, we can save the above code as a JS file, in the desired page directly reference:
<script type= "Text/javascript" src= "Cssturn.js" ></script>
Of course, you can also directly write the above code directly inside the page.
There are three different styles in our style, one of the two other styles by default. Introduce these three CSS files into the paging 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"/>
Well, we can now add a link to the toggle 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 are done, test the results above, see the effect of it.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title> o q homeland </title> <link rel=" stylesheet "type=" Text/css "href=" http:// Www.52css.com/attachments/month_0701/r2007128164252.css "/> <link rel=" stylesheet "type=" text/css "href=" http ://www.52css.com/attachments/month_0701/c2007128164223.css "title=" aaa "/> <link rel=" stylesheet "type=" text/ CSS "href=" Http://www.52css.com/attachments/month_0701/h2007128164239.css "title=" bbb "/> <script type=" text/ JavaScript "> 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) ret Urn 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 = ""; 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); The var cookie = Readcookie ("style"); var title = cookie? Cookie:getpreferredstylesheet (); Setactivestylesheet (title); </script> </pead> <body> Default style-white style one-blue style two-orange <div></div> </body> </HTML&G T
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
