CSS style implementation for real-time switching of web pages

css| Web page

Switch CSS styles in real time

Web sites built with the standards of the consortium can theoretically be separated from the structure by complete performance. 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

Then use your Firefox to open this page, select in the menu bar: View-> page style, you should see the following "Landscape":

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.

[Separator]

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:

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.

I use PHP here as an example, in other languages are the same, for the general developer will not have any difficulties.

The basic idea is this: the user chooses a "skin", the user's choice into a cookie (recorded in the database is the same, but this system overhead will be more), users visit any page on the site, and then from the cookie (or database) read out before the user's choice, Load the appropriate CSS file (here's the example of the A.CSS and B.css mentioned in method one).

Create a file named switcher.php, which reads as follows:

<?php$style = $_get["Style"];setcookie (' style ', $style, Time () +31536000, '/', '. site.com ', ' 0 '); Header ("Location:" . $_server[' Http_referer ']);? >

This script reads the query data first, and then notes the value of the parameter style to the cookie, and finally returns to the previous page. Next we can create two links for switching styles, and put them on the appropriate pages, such as the home page or user admin background (Note that you change the site.com to your domain name):

<a href= "switcher.php?style=a" > Theme a</a>
<a href= "switcher.php?style=b" > Theme b</a>

Click on any link, the corresponding will be "a" or "B" into the cookie, and then need a script to read this cookie value and output XHTML to introduce the corresponding CSS:

<?php if (isset ($_cookie["style")) {$style = $_cookie["style"];} else{$style = "a";//default theme a}?>
<link rel= "stylesheet" type= "Text/css"
Title= "currently selected topic" href= "<?php echo $style? >.css"/>

Every page that needs to switch styles should add this code, so just add it to the header file on the site. Of course you can modify the script according to your own needs, but same, the general idea should be unchanged.

<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>

<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"/>