动态CSS，换肤技术

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

以下是程序代码：
<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>

赞 (0)

相关推荐

  • javascript实现动态CSS换肤技术的脚本

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

  • 动态CSS，换肤技术

    见的例子就是:一个站点上有多个页面样式提供浏览者选择. 同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式. 自然会想到了Cookie技术 以下是程序代码: <HTML> <HEAD> <link ID="skin" rel="stylesheet" type="text/css"> <TITLE>换肤技术</TITLE> <SCRIPT LANGUAGE=javascri

  • Android 换肤技术资料整理

    Android换肤技术总结 背景 纵观现在各种Android app,其换肤需求可以归为 - 白天/黑夜主题切换(或者别的名字,通常2套),如同花顺/自选股/天天动听等,UI表现为一个switcher. - 多种主题切换,通常为会员特权,如QQ/QQ空间. 对于第一种来说,目测应该是直接通过本地theme来做的,即所有图片/颜色的资源都在apk里面打包了. 而对于第二种,则相对复杂一些,由于作为一种线上服务,可能上架新皮肤,且那么多皮肤包放在apk里面实在太占体积了,所以皮肤资源会在选择后再进行

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

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

    在cnbruce''s blog上看到这个即时换STYLE的代码,觉得不错就COPY过来备用.在见的例子就是:一个站点上有多个页面样式提供浏览者选择.同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.自然会想到了Cookie技术. 程序代码<HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术<

  • android使用SkinManager实现换肤功能的示例

    试着用鸿洋大神写的SkinManager实现了换肤功能. 一.配置 在app下build.gradle中添加依赖: //换肤功能 compile 'com.zhy:changeskin:4.0.2' 这样就配置好了,然后在程序入口进行初始化. 二.全局初始化 在自己创建的继承application的类中添加: //换肤sdk初始化 SkinManager.getInstance().init(this); 这个类肯定要在清单文件<application/>节点配置的. 接下来还需要注册. 三.

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • vue+element实现动态换肤的示例代码

    vue+element实现动态换肤的示例代码

    有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g

  • 基于element-ui 动态换肤的代码详解

    基于element-ui 动态换肤的代码详解

    1.在安装好element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装element-theme npm i element-theme -D 3.安装theme-chalk npm i element-theme-chalk -D # or from github npm i https://github.com/ElementUI/theme-chalk -D 4.初始化变量文件 et -i // 默认的文件是e

  • js+css简单实现网页换肤效果

    js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

随机推荐