Shulou(Shulou.com)06/02 Report--

What are the ways to achieve CSS skin switching at the right time? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

And you focus on how to use CSS to achieve timely skin switching, W3C standard website, can achieve complete performance and structure separation, just like a skin, "skin" is essentially "CSS", we just need to use some way to let the browser load another set of CSS, re-render the page.

Using CSS to realize timely skin switching

Websites built with W3C standards can theoretically achieve complete separation of performance and structure. For example, you can completely change the skin (performance, CSS) without moving the skeleton (structure, XHMTL) and muscles (behavior, Javascript).

Of course, before skinning, you need to build your website according to W3C standards and prepare two different sets of CSS for it. "skinning" is essentially "changing CSS". All we have to do is to get the browser to load another set of CSS in some way and re-render the page. There are many ways, and I'll introduce the three most common ones.

Method 1: do nothing

Suppose we have two sets of CSS, enclosed in two different files: a.css and b.css. Then add the following two lines of XHTML code between and:

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

It's as simple as that. Now you can use Firefox to change your skin. IE? IE doesn't have this feature. That's what MS does, and the W3C "explicitly recommends" that browsers provide users with the right to choose their own stylesheets, but it doesn't. Fortunately, it's not too complicated.

Method 2: Javascript

On the basis of method 1, you can use Javascript's DOM method to access the link object, and then set the unwanted CSS to "disabled", and the rest of the CSS will be used by the browser to render the page. Note the comments in the script as follows:

FunctionsetStyle (title) {/ / predefined variable vari,links; / / get all the link elements links=document.getElementsByTagName ("link") using the DOM method; for (iDefino) links [I] Style +) {/ / determine whether there is a style keyword in the rel attribute of this link element / / that is, whether the link element is a stylesheet link / / and determine whether the link element contains the title attribute if (links[ I] .getAttribute ("rel"). IndexOf ("style")! =-1 & & links[ I] .getAttribute ("title") {/ / set it to disabled links [I] .getAttribute ("title") {/ / regardless of Sanqi 21. / / then determine whether the keyword if (links[ I] .getAttribute ("title") .indexOf (title)! =-1) specified by us exists in its title / / if so, activate links[ I] .getAttribute = false;}

Then call this function in the appropriate place, and take this page as an example, add the following two buttons:

The advantage of using Javascript is convenient, fast and simple, and the disadvantage is also obvious: it is difficult to switch the CSS of the whole station, and it can only be limited to the current page. In order to remember the user's choice, the feasible solution is to use cookie. But even if you use cookie, you still need to write more articles about when to load CSS and what users should do without Javasciprt support. So why don't we use the following method--

Method 3: server-side script

There is no doubt that * CSS switches should be developed using server-side scripts (PHP, ASP, JSP, etc.). The benefits are obvious: direct, efficient, compatible, can remember user choices, and can even combine different CSS to achieve quite complex "skin" switching.

I'll use PHP as an example here, and other languages are pretty much the same, so there won't be any difficulty for the average developer.

The basic idea is this: the user chooses a "skin" and records the user's choice in cookie (same as in the database, but it will cost more). When the user visits any page on the site, the user will read out the previous user's choice from the cookie (or database) and load the corresponding CSS file (here or take the a.css and b.css mentioned in method 1 as an example).

Create a file called switcher.php with the following contents:

This script first reads the query data, and then writes the value of the parameter style into cookie,*** to return to the previous page. Then we can create two links to switch styles and put them on the appropriate page, such as the home page or the user management background (be sure to change the site.com to your domain name):

Topic A topic B

Click on any link, and the corresponding "a" or "b" will be recorded in cookie, and then you need a script to read the cookie value and output XHTML to introduce the corresponding CSS:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.