动态CSS站点教程:多个页面样式提供浏览者选择

在cnbruce''s blog上看到这个即时换STYLE的代码,觉得不错就COPY过来备用.

  在见的例子就是:一个站点上有多个页面样式提供浏览者选择.同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.自然会想到了Cookie技术。

动态CSS站点教程:多个页面样式提供浏览者选择

   程序代码

  <HTML>

  <HEAD>

  <link ID="skin" rel="stylesheet" type="text/css">

  <TITLE>换肤技术</TITLE>

  <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;

  //以下设置COOKIES时间为1年,自己随便设置该时间..

  SetCookie("nowskin",url,expdate,"/",null,false);

  }

  }

  //-->

  </SCRIPT>

  </HEAD>

  <BODY>

  <P>请选择下面的下拉菜单测试换肤效果</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>选择样式单文件</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]+"样式单文件</option>");

  else

  document.write("<option value=\""+csss[i]+"\">"+csss[i]+"样式单文件</option>");

  </script>

  </select>

  </BODY>

  </HTML>