Standard construction site: Use CSS to achieve a timely page skin switch

css| Standard | page with CSS to achieve a timely page skin change-the web site built with the standards of the world, theoretically can be complete performance and structure of separation. For example, it is possible to completely change the skin (performance, CSS) without moving the skeleton (structure, XHMTL) and muscle (behavior, Javascript).

Of course, you need to first build your website according to the standard of the web, and prepare two different CSS for it before you change your skin. "Change the Skin" is essentially "change the CSS", we want to do, but in some way let the browser load another set of CSS, rendering the page. There are many ways to do this, and I'll introduce you to the three most common types.

method One: Do nothing

Ah? Not doing anything? Well, this ... To be exact: you really think you have such a good thing to do. ）。

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, choose from the menu bar: View-> page style, you can choose these two themes.

So simple, now you can use Firefox to "Change the skin". Ie? IE does not have this function ... MS is such a drag, the "clear recommendation" of the "Web": Ask the browser to provide users with the right to choose the style sheet, but it does not do so. Luckily this is not too difficult, let's do it for a while.

method Two: Javascript

On the basis of method one, you can access the link object using the JavaScript Dom method, and then set the unwanted CSS to Disabled (disabled), and the remaining CSS will be used by browsers to render the page. The script is as follows, please note the comments:
<script type= "Text/javascript" >
function SetStyle (title) {
Predefined variables
var i, links;
Get all the link elements with the DOM method
Links = document.getElementsByTagName ("link");
for (i=0; links[i]; i++) {
Determine if there is a style keyword in the Rel property of this link element
Whether this link element is a style sheet link
Also determine if this link element contains the title attribute
if (Links[i].getattribute ("rel"). IndexOf ("style")!=-1
&& Links[i].getattribute ("title")) {
No matter 3,721, set it to disabled.
Links[i].disabled = true;
To determine if there is a keyword in the title that we specify.
if (Links[i].getattribute ("title"). IndexOf (title)!=-1)
Activate it if you have it
links[i].disabled = false;
}
}
}
</script>
Then call this function in the appropriate place, taking this page as an example, add the following two buttons:
<input type= "button" value= "Qing Qing"/><input type= "button" value= "Ghost Flame"/>
The advantage of using JavaScript is convenient, fast, simple, and the disadvantage is obvious: it is difficult to do the whole station of the CSS switch, can only be limited to the current page. In order to remember the user's choice, the feasible solution is to use cookies. However, even if the use of cookies, but also need to load the CSS, the user does not have JAVASCIPRT support how to do a number of issues such as many articles. So instead of using the following method--

method Three: server-side scripting

There is no doubt that the best CSS switcher should be developed using server-side scripting (PHP, ASP, JSP, etc.). The benefits are obvious: direct, efficient, compatible, can remember user selection, and can even combine different CSS to achieve a fairly complex "skin" switch.

The basic idea is this: the user chooses a "skin", the user's choice is recorded in a cookie (as is the case with the database, but it is much more expensive), and when a user accesses any page on the site, it reads the user's selection from the cookie (or database) and loads the corresponding CSS file.