Four methods to change the style (CSS)

: Cookies

Reference content: <script language = JavaScript>
<! --
Function setcookie (name, value ){
VaR argv = setcookie. arguments;
VaR argc = setcookie. Arguments. length;
VaR expires = (2 <argc )? Argv [2]: NULL;
VaR Path = (3 <argc )? Argv [3]: NULL;
VaR domain = (4 <argc )? Argv [4]: NULL;
VaR secure = (5 <argc )? Argv [5]: false;
Document. Cookie = Name + "=" + escape (value) + (expires = NULL )? "" :( "; Expires =" + expires. togmtstring () + (Path = NULL )? "" :( "; Path =" + path) + (domain = NULL )? "" :( "; Domain =" + domain) + (secure = true )? "; Secure ":"");
}

Function getcookie (name ){
VaR search = Name + "= ";
VaR returnvalue = "";
If (document. Cookie. length> 0 ){
Offset = Document. Cookie. indexof (Search );
If (offset! =-1 ){
Offset + = search. length;
End = Document. Cookie. indexof (";", offset );
If (END =-1)
End = Document. Cookie. length;
Returnvalue = Unescape (document. Cookie. substring (offset, end ));
}
}
Return returnvalue;
}

VaR thisskin;
Thisskin = getcookie ("nowskin ");
If (thisskin! = "")
Skin. href = thisskin;
Else
Skin. href = "css.css ";

Function changecss (URL ){
If (URL! = ""){
Skin. href = URL;
VaR expdate = new date ();
Expdate. settime (expdate. gettime () + (24*60*60*1000*30 ));
// Expdate = NULL;
// Set the cookie time to one year ..
Setcookie ("nowskin", URL, expdate, "/", null, false );
}
}
// -->
</SCRIPT>

Usage

Save the above Code as styleswitch. js

Reference: <SCRIPT type = "text/JavaScript" src = "styleswitch. js"> </SCRIPT>

<Link id = "skin" rel = "stylesheet" type = "text/CSS">
<P> select the drop-down menu below to test the skin replacement effect. </P>

<A href = # onclick = "changecss('css.css ')"> css.css </a>
<A href = # onclick = "changecss('css1.css ')"> css1.css </a>
<A href = # onclick = "changecss('css2.css ')"> css2.css </a>
<A href = # onclick = "changecss('css3.css ')"> css3.css </a>
<Br>
<Select onchange = "changecss (this. Value)">
<Option> select a style sheet file </option>
<Script language = "JavaScript">
VaR CSSS = new array ();
CSSS [0] = "css.css ";
CSSS [1] = "css1.css ";
CSSS [2] = "css2.css ";
CSSS [3] = "css3.css ";
VaR I;
For (I = 0; I <4; I ++)
If (thisskin = CSSS [I])
Document. write ("<option value = \" "+ CSSS [I] +" \ "selected>" + CSSS [I] + "style sheet file </option> ");
Else
Document. Write ("<option value = \" "+ CSSS [I] +" \ ">" + CSSS [I] + "style sheet file </option> ");
</SCRIPT>
</SELECT>

2: more complex

Reference: function getcookie (name ){
VaR Re = new Regexp (name + "= [^;] +", "I"); // construct re to search for target name/value pair
If (document. Cookie. Match (re) // If Cookie found
Return document. Cookie. Match (re) [0]. Split ("=") [1] // return its value
Return null
}

Function setcookie (name, value, days ){
VaR expiredate = new date ()
// Set "expstring" to either future or past date, to set or delete cookie, respectively
VaR expstring = (typeof days! = "Undefined ")? Expiredate. setdate (expiredate. getdate () + parseint (days): expiredate. setdate (expiredate. getdate ()-5)
Document. Cookie = Name + "=" + value + "; expires =" + expiredate. togmtstring () + "; Path = /";
}

Function deletecookie (name ){
Setcookie (name, "moot ")
}

Function setstylesheet (title ){
VaR I, cacheobj
For (I = 0; (cacheobj = Document. getelementsbytagname ("Link") [I]); I ++ ){
If (cacheobj. getattribute ("rel"). indexof ("style ")! =-1 & cacheobj. getattribute ("title ")){
Cacheobj. Disabled = true
If (cacheobj. getattribute ("title") = title)
Cacheobj. Disabled = false // enable chosen style sheet
}
}
}

Function choosestyle (styletitle, days ){
If (document. getelementbyid ){
Setstylesheet (styletitle)
Setcookie ("mysheet", styletitle, days)
}
}

Function indicateselected (element) {// optional function that shows which style sheet is currently selected within group of radio buttons or select menu
VaR I
If (selectedtitle! = NULL & (element. type = undefined | element. type = "select-one") {// If element is a radio button or select menu
VaR element = (element. type = "select-one ")? Element. Options: Element
For (I = 0; I <element. length; I ++ ){
If (element [I]. value = selectedtitle) {// If match found between form Element value and cookie value
If (element [I]. tagname = "option") // If This Is A Select menu
Element [I]. Selected = true
Else // else if it's a radio button
Element [I]. Checked = true
Break
}
}
}
}

VaR selectedtitle = getcookie ("mysheet ")
If (document. getelementbyid & selectedtitle! = NULL) // load user chosen style sheet if there is one stored
Setstylesheet (selectedtitle)

Function externallinks (){
If (! Document. getelementsbytagname) return;
VaR anchors = Document. getelementsbytagname ("");
For (VAR I = 0; I <anchors. length; I ++ ){
VaR anchor = anchors [I];
If (anchor. getattribute ("href ")&&
Anchor. getattribute ("rel") = "external ")
Anchor.tar get = "_ blank ";
}
}
Window. onload = externallinks;

Usage

Save the above Code as styleswitch. js

Reference: <SCRIPT type = "text/JavaScript" src = "styleswitch. js"> </SCRIPT>

<Link media = "screen" href = "css1.css" rel = "stylesheet" type = "text/CSS" Title = "default"/>
<Link media = "screen" href = "css2.css" rel = "alternate stylesheet" type = "text/CSS" Title = "blue"/>
<Link media = "screen" href = "css3.css" rel = "alternate stylesheet" type = "text/CSS" Title = "orange"/>
<A Title = "Default style" href = "javascript: choosestyle ('default', 5)"> default style </a>
<A Title = "Orange style" href = "javascript: choosestyle ('Orange ', 5)"> orange style </a>
<A Title = "Blue style" href = "javascript: choosestyle ('blue', 5)"> blue style </a>

3: Simple Method

Reference content: <SCRIPT type = "text/JavaScript">
Function setstyle (title ){

// Pre-defined variable
VaR I, links;

// Use the DOM method to obtain all link elements
Links = Document. getelementsbytagname ("Link ");

For (I = 0; Links [I]; I ++ ){

// Determine whether the style keyword exists in the rel attribute of the link element.
// Whether the link element is a style sheet Link
// 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 no matter which one of the following is true:
Links [I]. Disabled = true;

// Determine whether the specified keyword exists in its title.
If (Links [I]. getattribute ("title"). indexof (title )! =-1)

// Activate it if any
Links [I]. Disabled = false;
}
}
}
</SCRIPT>

Usage

Save the above Code as styleswitch. js

Reference: <SCRIPT type = "text/JavaScript" src = "styleswitch. js"> </SCRIPT>

<LINK rel = "stylesheet" type = "text/CSS"
Title = "A" href = "css0.css"/>
<LINK rel = "alternate stylesheet" type = "text/CSS"
Title = "B" href = "css1.css"/>
<LINK rel = "stylesheet" type = "text/CSS"
Title = "C" href = "css2.css"/>
<LINK rel = "stylesheet" type = "text/CSS"
Title = "D" href = "css3.css"/>

<P> select the drop-down menu below to test the skin replacement effect. </P>
<Input type = "button" value = "clear light" onclick = "setstyle ('A');"/>
<Input type = "button" value = "" onclick = "setstyle ('B');"/>
<Input type = "button" value = "" onclick = "setstyle ('C');"/>
<Input type = "button" value = "" onclick = "setstyle ('D');"/>

4: A hidden layer is used to set the style.

Reference content: // hide the show skin replacement box
Function showhidediv (init ){
If (document. getelementbyid ("sright"). style. Display = "Block "){
Document. getelementbyid ("sright"). style. Display = "NONE ";
}
Else {
Document. getelementbyid ("sright"). style. Display = "Block ";
}
}
// -->

The others are similar to the three above.

/Files/Maxie/rogu_changecss.rar