用js来实现页面的换肤功能

js实现换肤功能的实现主要是通过利用js控制CSS来实现的。大致的实现原理是这样的,

1、先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的DIV元素有一个基本的框架结构。

2、再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色,边框颜色等等。

3、用JS函数来决定调用哪个样式,并把调进来的样式写进cookie,这样就可以达功能。

例如:我们的页面结构如下:
<div id="header"></div>
<div id="contant"></div>
<div id="footer"></div>
-------------------------------------------
style.css
#header{width:700px;height:120px; margin:0px auto;}
#contant{width:700px;height:400px; margin:0px auto;}
#footer{width:700px;height:200px; margin:0px auto;}
-------------------------------------------
color1.css
#header,#contant,#footer{boder:1px solid #dfaf33;
background-color:#eeeeee;}
-------------------------------------------
color2.css
#header,#contant,#footer{boder:1px solid #ff00ea;
background-color:#ff3322;}
-------------------------------------------
页面中这两行比较关键:
<link href="css/style.css" rel="stylesheet" type="text/css"
/>
<link href="css/color1.css" id="color" rel="stylesheet"
type="text/css" />
第1行引入页面的基本样式,第2行引入一个颜色样式color2.css给页面一个初始化颜色,第2行中有一个id="color"这个很关键它为JS函数提供了

接口,js通过这个id改变href的值来决定引入那个颜色样式,从而达到改变页面颜色样式的目的。

改变颜色样式的按钮我们可以用文字链接来实现,也可以用其他元素来实现。

<a onclick="changeStyle(1)">样式1</a>
<a onclick="changeStyle(2)">样式2</a>
--------------------------------------------
实现这些功能的js函数:
function getObject(elementId) { //获取指定id的object
 if (document.getElementByIdx) {
  return
document.getElementByIdx(elementId);
 } else if (document.all) {
  return
document.all[elementId];
 } else if (document.layers) {
  return
document.layers[elementId];
 }
}
function changeStyle(id){//切换样式
 var
stylesheet=getObject("color").href="css/color"+id+".css";
 document.cookie="stylesheet="+escape(stylesheet);//写入Cookie

//alert(document.cookie);
 //alert(stylesheet);
}

function
initStyle(){ //初始化样式,如果cookie存在样式,则加载cookie样式,否则加载默认样式

if(/stylesheet=([^;]+)/.test(document.cookie))//判断是否存在cookie.

getObject("color").href=unescape(RegExp.$1);

//alert(/stylesheet=([^;]+)/.test(document.cookie));

}
initStyle();

用js来实现页面的换肤功能(带cookie记忆)的更多相关文章

  1. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  2. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  3. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  4. 使用 css/less 动态更换主题色(换肤功能)

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  5. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  6. Android QMUI实战:实现APP换肤功能,并自动适配手机深色模式

    Android换肤功能已不是什么新鲜事了,市面上有很多第三方的换肤库和实现方案. 之所以选择腾讯的QMUI库来演示APP的换肤功能,主要原因: 1.换肤功能的实现过程较简单.容易理解: 2.能轻松适配 ...

  7. 一种简单的实现:Android一键换肤功能

    现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...

  8. .NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能

    IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. Iri ...

  9. Android 换肤功能的实现(Apk插件方式)

    一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...

随机推荐

  1. JAVA实现二进制,十六进制输出

    public class Main { /** * @param args */ public static void main(String[] args) { // TODO Auto-gener ...

  2. jdb 调试

    C:\Users\Reverse>adb shell am start -D -n lwf.lc.pncdd/lwf.lc.pncdd.MainC 查看内存情况: cat /proc/N/map ...

  3. brbustoj 1818 石子合并问题--直线版

    比较经典且基础的区间dp,转移方程为 dp_max[i][j] = max(dp_max[i][j],dp_max[i][k] + dp_max[k+1][j] + sum[j]-sum[i-1]); ...

  4. C++多线程二

    SuspendThread()暂停一个线程,ResumeThread()重启一个线程.参数均为线程的句柄. #include <iostream> #include <windows ...

  5. 关于HTTP_CLIENT_IP,HTTP_X_FORWAR

    HTTP_CLIENT_IP:可通过http头伪造HTTP_X_FORWARDED_FOR:可通过http头伪造REMOTE_ADDR:可能是用户真实IP也可能是代理IP 服务端获取IP地址 http ...

  6. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  7. SpringMVC轻松学习-其他常用(四)

    Spring MVC 3.0 深入 核心原理 1.      用户发送请求给服务器.url:user.do 2.      服务器收到请求.发现DispatchServlet可以处理.于是调用Disp ...

  8. iOS navigationBar 的isTranslucent属性

    苹果文档: A Boolean value indicating whether the navigation bar is translucent (YES) or not (NO). The de ...

  9. Unity 3d中Shader是什么,可以吃吗?

    众所周知,Unity3d是一款跨平台非常广的游戏引擎,上手容易,界面友好,集成功能众多,是目前开发手游的主流引擎.本人有幸使用Unity 3d进行开发已一年多时间,已领略了这歀引擎的强大之处. 编写s ...

  10. PHP操作mysql类

    <?php class Mysql{ //数据库连接句柄 private $link; //返回结果集 private $result; //返回查询数据 private $data; //执行 ...