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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.