W3C standard: Real-Time CSS style Switching

Technically, websites built using W3C standards can be completely separated from the structure. For example, you can completely change your skin (performance, CSS) without moving the skeleton (structure, xhmtl) and muscle (behavior, JavaScript ).

Of course, before you change the skin, you need to build your website according to W3C standards and prepare two sets of CSS with different performance for it. "Skin changing" is actually "CSS changing". What we need to do is to let the browser load another set of CSS in some way and re-render the page. There are many methods. I will introduce the three most common methods.

Method 1: do nothing

Ah? Do nothing? Well, this ...... To be accurate, just do a little bit (you really think there is such a good thing ......).

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:

Then open the page with your Firefox and choose View> page style from the menu bar. You can see the following "scenery ":

This is simple. Now you can use Firefox to "change skin. Ie? IE does not have this function ...... Ms is so arrogant, W3C "plaintext recommendation": requires the browser to provide users with the right to choose their own style sheets, but it does not. Fortunately, this is not too difficult to handle.

[Separator]

Method 2: Javascript

On the basis of method 1, you can use the Javascript DOM method to access the link object, and then set unnecessary CSS to "disabled )", the remaining CSS will be used by the browser to render the page. Note the following annotations for the script:

Then, call this function in the appropriate place. Take this page as an example and add the following two buttons:

<Input type = "button" value = "clear light" onclick = "setstyle (''clear light''); "/>

<Input type = "button" value = "" onclick = "setstyle ('' ''); "/>

The advantage of using JavaScript is convenience, speed, and simplicity. The disadvantage is also obvious: it is difficult to achieve full-site CSS switching, and it can only be limited to the current page. To remember users' choices, the feasible solution is to use cookies. However, even if you use cookies, you also need to load the CSS at the time. You do not have the javasrt RT support.Article. So it is better to use the following method --

Method 3: server scripts

Undoubtedly, the best CSS switch should be developed using server scripts (PHP, ASP, JSP, etc. The benefits of doing so are obvious: direct, efficient, compatible, user-friendly, and even the combination of different CSS to implement a very complex "skin" switch.

I will use PHP here as an example. It is similar to other languages, so it will not be difficult for general developers.

The basic idea is as follows: callback is used as an example ).

Create a file named switcher. php with the following content:

<PHP $ style =

$ _ Get ["style"]; setcookie (''style', $ style, time () + 31536000, ''/'', ''.site.com '', ''0 '')

; Header ("Location:". $ _ server [''http _ referer']);?>

This script first reads the query data, then records the value of the style parameter into the cookie, and returns to the previous page. Next, we can create two links for style switching and place them on a suitable page, such as the homepage or user management background (replace site.com with your domain name ):

<A href = "switcher. php? Style = A "> Topic A </a>

<A href = "switcher. php? Style = B "> Topic B </a>

Click any link and the corresponding "A" or "B" will be recorded in the cookie. Then, you need a script to read the cookie value and output XHTML to introduce the corresponding CSS:

<PHP if (isset ($ _ cookie ["style"]) {$ style = $ _ cookie ["style"] ;}else {$ style = ""; // The default Topic A?}?>

<LINK rel = "stylesheet" type = "text/CSS"
Title = "currently selected topic" href = "<? PHP echo $ style?>. CSS "/>

This code must be added to each page for style switching, so you can simply add it to the header file of the website. Of course, you can modify this script according to your own needs, but the general idea should remain unchanged.

<SCRIPT type = "text/JavaScript">
Function setstyle (title ){

// Pre-defined variable
VaR I, links;

// Use the DOM method to obtain all link elements
Links? = Document. getelementsbytagname ("Link ");

For (I = 0; Links [I]; I ++ ){

// Determine whether the style keyword exists in the rel attribute of the link element.
// Whether the link element is a style sheet Link
// Determine whether the link element contains the title attribute.
If (Links [I]. getattribute ("rel"). indexof ("style ")! =-1
& Links [I]. getattribute ("title ")){

// Set it to disabled no matter which one of the following is true:
Links [I]. Disabled = true;

// Determine whether the specified keyword exists in its title.
If (Links [I]. getattribute ("title"). indexof (title )! =-1)

// Activate it if any
Links [I]. Disabled = false;
}
}
}
</SCRIPT>

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

Title = "Topic B" href = "B .css"/>?