Real-time CSS style implementation for webpage switching

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 line of XHTML code between 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 = "Qingguang" onclick = "setStyle ('qingguang '); "/> <input type =" button "value =" "onclick =" setStyle (' any'); "/>
The advantages of using Javascript are convenience, efficiency, 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, a feasible solution is to use cookies. However, even if you use cookies, you also need to write more articles on how to load CSS when the user does not support javasrt RT. 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 ).