CSS style implementation for real-time switching of web pages

Toggle CSS styles in real time
Web sites built with the standard of standards can theoretically be completely separated from the structure. For example, it is possible to completely change the skin (performance, CSS) under the premise of not moving the skeleton (structure, XHMTL) and muscle (behavior, Javascript).

Of course, before you change the skin you need to set up your website according to the standard, and prepare two different sets of CSS for it. "Skin Change" is essentially "change the CSS", what we have to do is just some way to let the browser load another set of CSS, re-render the page. There are many ways to do this, and I'll cover three of the most common ones.

Method One: Don't do anything

Ah? You're not doing anything? Well, this ... To be exact: it's so little (you really think there's 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 "scenery":

It's 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": Ask the browser to give users the right to choose their own style sheet, but it does not do so. Fortunately this is not too difficult, let's do it for a moment.

[Separator]

Method Two: Javascript

On the basis of method one, the link object can be accessed using JavaScript's Dom method, then the unwanted CSS is set to "disabled" (disabled), and the remaining CSS will be used by the browser to render the page. The script follows, note the comments:

Then call this function in the appropriate place, for example on this page, add the following two buttons:

<input type= "button" value= "Qing Qing" onclick= "SetStyle (' Qing Guang ');"/><input type= "button" value= "onclick=" SetStyle (' Nether Flame ');/>

The benefits of using JavaScript are convenient, fast, simple, and the downside is obvious: it's hard to do a full-site CSS switch, which can only be limited to the current page. In order to remember the user's choice, the feasible solution is to adopt the cookie. However, even if you use cookies, you need to do more articles on when to load CSS, users do not have javasciprt support to do. So it's better to use the following method--

Method Three: server-side scripting

Undoubtedly, the best CSS switcher should be developed using server-side scripting (PHP, ASP, JSP, and so on). The benefits are obvious: direct, efficient, compatible, can remember user choice, can even combine different CSS to achieve quite complex "skin" switch.

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

The basic idea is this: the user chooses a "skin", put the user's choice into a cookie (the same as the database, but the system overhead will be larger), the user visits any page on the site, and then from the cookie (or database) read out the previous user's choice, Load the corresponding CSS file (here's an example of A.css and B.css as described in method one).

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 reads the query data first, then the value of the parameter style into a cookie, and then returns to the previous page. Then we can create two links for switching styles, and put them on the appropriate page, such as the homepage or the user Management background (note the site.com to your domain):

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

Clicking on any of the links will put "a" or "B" into a cookie, then you will 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 = "a";//Use Theme a}?> by default
<link rel= "stylesheet" type= "Text/css"
Title= "currently selected theme" Href= "<?php echo $style? >.css"/>

Each page that needs to switch styles is added to this code, so just add it to the site's header file. Of course you can modify this script according to your own needs, but original aim, the general idea should be the same.

<script type= "Text/javascript" >
function SetStyle (title) {

Pre-defined variables
var i, links;

Get all the link elements using the DOM method
Links = document.getElementsByTagName ("link");

for (i=0; links[i]; i++) {

Determine if there is a style keyword in the rel attribute 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;

and determine if there is a keyword in its title that we specify.
if (Links[i].getattribute ("title"). IndexOf (title)! =-1)

Activate it if there is one
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"/>

The above is the real-time switch page CSS style implementation of the content, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!

