Three ways to implement real-time switch CSS styles

Css

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

<link rel="stylesheet" type="text/css" title="主题A" href="a.css" /><link rel="alternate stylesheet" type="text/css" title="主题B" href="b.css" />

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.

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) {  //预定义变量  var i, links;  //用DOM方法获得所有的link元素  links= document.getElementsByTagName("link");    for(i=0; links[i]; i++) {    //判断此link元素的rel属性中是否有style关键字    //即此link元素是否为样式表link    //同时判断此link元素是否含有title属性    if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) {      //先不管三七二十一把它设为disabled      links[i].disabled = true;      //再判断它的title中是否有我们指定的关键字      if(links[i].getAttribute("title").indexOf(title) != -1)        //如果有则将其激活        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="清光"  />
<input type="button" value="冥焰"  />

Trial effect:

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">主题A</a><a href="switcher.php?style=b">主题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";//默认采用主题A
}
?><link rel="stylesheet" type="text/css" title="当前选择的主题" 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. This is the site is done in this way CSS switcher, you can be found in the search box on the right side of the home page.