JavaScript实现动态CSS,换肤技术

原创 2007年09月13日 16:57:00
   常见的例子就是:一个站点上有多个页面样式提供浏览者选择(很多blog系统都有使用)。同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。自然会想到了JavaScript + Cookie技术,下面是HTML代码部分(另外再加需要的CSS文件就可以使用了):

<html>
<head>
<link ID="skin" rel="stylesheet" type="text/css">
<title>动态换肤技术</title>
<script language="javascript" type="text/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>
<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></p>
<p>
    <select name="select" onChange="changecss(this.value)">
      <option>选择样式单文件</option>
    </select>
</p>
<select name="select" onChange="changecss(this.value)">
<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>

 

相关文章推荐

JavaScript+CSS实现网页换肤功能

Html代码部分 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href。 <link href="css/main0.css" rel="stylesheet" type="...

Jquery给frameset换肤,cookie动态加载css

frameSet页面: 跳转页 /Login_loginTop" name="topFrame" frameborder="0" scrolling="no" nor...
  • HiAllan
  • HiAllan
  • 2012年05月16日 22:46
  • 1072

Android插件化系列第(二)篇---动态加载技术之应用换肤

Android系统使用了ClassLoader机制来进行Activity等组件的加载;apk被安装之后,APK文件的代码以及资源会被系统存放在固定的目录(比如/data/app/package_nam...

插件化开发实现动态换肤

  • 2016年09月02日 00:39
  • 3.25MB
  • 下载

根据用户选择用JS切换生效的CSS文件实现网站网页换肤

 说明:关于实现这个用途的文章,一般只是直接给了代码,没有对关键知识点的必要解释。本文侧重讲解原理和关键点,为方便网友使用,在后面附加了具体的代码,可实现将选择的风格名称存到cookie里去。 正文:...

Android插件化开发实现动态换肤

今晚实在不想coding,于是想着整理点知识点,那么简单整理了下插件化开发实现动态更换皮肤。插件化开发大家应该不陌生或多或少用过或听过,插件化开发在项目业务拓展、模块化等方面有不小优势,当然实现一个完...

VS2008 WINFROM 利用WeifenLuo +OUTLOOKBAR +IrisSkin2.dll实现换肤 标签页面 以及子动态加载子菜单的实实例

下面是全部页面的代码程序 using System; using System.IO; using System.Collections.Generic; using System.Compo...
  • ww163
  • ww163
  • 2012年07月12日 17:07
  • 1124

iOS端实现「节日换肤」通用技术方案(无需更新程序)

本文是我一个好朋友写的,因为之前没接触过,所以特意转过来,和大家一起分享下.. 以下正文: 一、问题的提出   不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛...
  • MR_LP
  • MR_LP
  • 2016年01月11日 10:23
  • 2300

Android QQ技术分享三(QQ换肤之SkinEngine实现)

首先展示截图 原作者:http://blog.csdn.net/cc_want/article/details/49179109 【前言说明】此技术在android QQ2.0...

Android 以apk包方式共享资源(动态换肤)的实现方式

package com.example.resapktest; import java.lang.reflect.Field; import java.util.HashMap; import an...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现动态CSS,换肤技术
举报原因:
原因补充:

(最多只允许输入30个字)