Discussion on real-time switching CSS styles in web design

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

<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="清光" onclick="setStyle('清光');" />
<input type="button" value="冥焰" onclick="setStyle('冥焰');" />

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.