Well, you have built your own webpage and tag it with a structured XHTML. As a capable small web designer, you also plan the appearance of the document with a style sheet. You even realize a small leap, made a few style sheets that brought to replace, and plan to use them to show your strength.
great. But now, you are probably a way to support various browsers to flexibly switch between these style sheets.
First, give you a styles
The style sheet can be associated with a list of documents through a LINK element, and this list is placed in the head section of the document. There may be such a relationship from the external style sheet and document: permanent, preferred and variable.
Permanent
This type of style table has been enabled (that is, the state has always been "ON"), of course they are used in conjunction with the style sheets of other activities. They can be used to store those rules that are shared by various style sheets. To make it permanently, the REL property is set to "Stylesheet", and does not set the title property.
For example, let Paul.css's style sheet permanently enabled, you can include the following link elements in the head:
2. Preferred
These pages are default enabled (they are set to "ON" when loading is loaded). When the user selects a style sheet that is replaced, they are disabled.
To make a style sheet be preferred, you can set the REL property to "Stylesheet", but also set up a Title property.
Of course, it is also possible to put more than one style sheet inside, as long as it gives the same Title attribute. These style sheets will be enabled and disabled. If you define more than one set of style sheets, the first group will be preferred. To make Paul.css become preferred, you have to add a title property and give the default style a name.
3. Variable
These style sheets can be provided to the visitor as an options for the preferred style sheet. They can allow visitors to choose his or her favorite programs, let this site personalized. They can also be used to improve the affinity of the website.
To make a replaceable style sheet, the REL property can be set to "Alternate Stylesheet", Title attribute is also indispensable. Like the "preferred" style table, the variable style sheet can also organize together by setting the same title property.
Or use the previous example, to make Paul.css become a variable style sheet, "alternate" must be added to the REL property.
Note that all these relationships are only valid for external style sheets introduced with a LINK element.
Second, switching styles
When a document is just loaded, the permanent style and preferred style will be applied to the documentation immediately. Since then the variable style sheet can be selected by the user. W3C tells us that the browser must let us choose the favorite style sheet and suggest it to provide a drop-down menu or toolbar to implement this.
So far, everything looks good. We have several styles, visitors can choose one of themselves through the menu. But we quickly discovered a problem, a big problem. Mozilla provides a menu under the "View" menu bar to allow the selected style sheet. But Microsoft Internet Explorer (MSIE) did not provide such a menu, so even if we have a lot of style sheets, they can't use them in MSIE.
There is a small segment of JavaScript, providing a style sheet selection method common to MSIE and Mozilla users through the DOM. Users' preferences can also be deposited in cookies. At the same time, because of the LINK tag used by W3C, this JavaScript does not affect the availability of the Mozilla menu, so this can be considered a moderate "downward compatibility".
Third, this script
First of all, our script must be able to distinguish three different style table types above. Relatively speaking, this is quite simple, after all, we only need to check two attributes of each link element.
Yes.
Is this a link to a style sheet?
HTMLLINKELEMENT.GETATTRIBUTE ("REL"). Indexof ("style")! = -1
Is there a Title property set?
HTMLLISTELEMENT.GETATTRIBUTE ("Title")
Does the REL attribute contain "Alternate" keywords?
HTMLLINKELEMENT.GETATTRIBUTE ("Rel"). Indexof ("alt")! = -1
Note that we only check the "Alt" string, because some browsers are accepted, the keywords for launch the optional style sheet are "alternate" instead of "alternate".
We can write a function to use these three inspections to switch between style sheets. It is committed to the traversal documentation, disabled all the preferred and variable style sheets we don't want to enable, and enable the preferred and variable style sheets we intend to enable.
Also note that only the preferred and variable style sheet LINK elements have Title properties.
So, this switching function is just like this:
Quote content:
Function setActiveStylesheet (Title) {
Var i, a, main;
For (i = 0; (a = document.getlementsBytagname ("link"); i ) {
IF (A.GetaTRibute ("Rel"). Indexof ("style")! = -1
&& A.GetaTRibute ("Title")) {
a.disabled = true;
IF (A.GetaTribute ("Title") == Title) a.disabled = false;
}
}
}
Four, cookie
Now we can transform style tables, very good. In this way, we have a personalized page, very good. But we still have no personalized sites. Because this preference for the style sheet is only applied to the current page, once leaving this page, the preference is lost. This problem can be corrected by cookie.
We need a new function to return to the current style sheet for stored in cookies. At the same time, we also need two other functions to read and write cookies.
Just look for the enabled preferred and optional style sheets, check their title to see if the requirements are met, you can return the title table of the current style sheet. Specifically, first we have another LINK element in the document, check if the link is a style sheet. If yes, check if it has Title. This can judge whether we prefer or optional styles.
The last step is to check that this style sheet is not enabled. If these three checks returns true, this is the current style sheet that can be returned to its Title.
This function is like this:
Quote content:
Function getActiveStylesheet () {
VAR I, A;
For (i = 0; (a = document.getlementsBytagname ("link"); i ) {
IF (A.GetaTRibute ("Rel"). Indexof ("style")! = -1
&& A.getaTRibute ("Title")
&&! A.disabled) Return A.GetaTRibute ("Title");
}
Return NULL;
}
Since this article is an article about style, and cookie is completely another topic, so I will not explain the following two functions about cookie. Of course, I still attach it to the bottom so that you can use (these functions are written by the author Peter-Paul Koch by ALA).
Quote content:
Function CreateCookie (Name, Value, Days) {
IF (days) {
Var Date = new date ();
Date.SetTime (Date.getTime () (DAYS * 24 * 60 * 60 * 1000));
VAR Expires = "; Expires =" Date.togmtstring ();
}
Else Expires = "";
Document.cookie = Name "=" Value Expires "; PATH = /";
}
Function Readcookie (Name) {
VAR nameEQ = Name "=";
Var ca = document.cookie.split (';');
For (var i = 0; i VAR C = CA; While (c.Charat (0) == ') c = c.substring (1, c.Length); IF (c.indexof (nameeq) == 0) Return C.Substring (Nameeeq.Length, C.Length); } Return NULL; } We must add online and onunload event listeners to the current window to enable these cookie functions. ONLOAD W3c specifies a DOM Level 2 property to the object, "disabled", that is, set this property to false when the style sheet is applied to the document, can disable the style table. This attribute is true in Mozilla, but there is no in MSIE. But Msie prepared a HTML property called "Disabled" to Link, which is initialized, and this property of all LINK elements is set to FALSE. We can pass the preferred style table to a setActiveStylesheet () function, so that the MSIE's Disabled property can be set like the DOSABLED attribute of DOM Level 2 (using the same method). (Substance, we set this two attributes again.) To find out which is the preferred style sheet, you have to use a new function. Because this function and getActiveStylesheet () are too like, I don't think I need to explain anything, but it is probably like this: Quote content: Function getPreferredStylesheet () { VAR I, A; For (i = 0; (a = document.getlementsBytagname ("link"); i ) { IF (A.GetaTRibute ("Rel"). Indexof ("style")! = -1 && A.GetaTRibute ("Rel"). Indexof ("alt") == -1 && A.getaTRibute ("Title") Return A.GetaTribute ("Title"); } Return NULL; } In the OnLoad function, we first set the title variable, this variable is either the Title of the previous style sheet that has already been deposited in cookies, or the cookie is not, it is the title of our preferred style sheet. We naturally name this cookie "Style". Next We pass the Title variable to the setActiveStylesheet () function. Then the OnLoad function is like this: Quote content: Window.onLoad = Function (e) { Var cookie = readcookie ("style"); Var title = cookie? cookie: getPreferredStylesheet (); SetActiveStylesheet (Title); } Note that this OnLoad function is best called before the OnLoad event, which enables the document to be presented in our preference with the correct style sheet at the beginning. If you decide to do this, make sure that this function is called after other functions and link elements. 2. ONUNLOAD Save cookies simply in the onunload event. We only need to use the getActiveStylesheet () function to get the enabled style sheet, save it into the cookie. So this function is like this: Quote content: WINDOW.ONLOAD = Function (e) { Var title = getActiveStylesheet (); CreateCookie ("Style", Title, 365); } Five, let's put together You can include these functions to your documentation, you can make your site more nature. If you want everything, I have put these functions together into a JavaScript file, you can download it immediately, put it in your site. Download Styleswitcher.js (../scripts/styleswitcher.js) You can add a Script element in your document head section to include this file, but make sure it is placed under the LINK element of the style sheet. HTML code is like this: Quote content:
