用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. Android--->activity界面跳转,以及查看生命周期过程

    main.xml界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  2. vc6 pbo 文件为空的解决方法

    使用Profile调试vc6应用程序的性能时,将生成pbo文件,今天在vc IDE中增加了命令行启动参数,导致profile无法生成pbo文件,进而无法生成性能报告. 解决方法: 去掉IDE中的命令行 ...

  3. CSS中关于margin的理解误区

    思考一 在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...

  4. html5中的postMessage解决跨域问题

    解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...

  5. javascript的 replace() 方法的使用讲解

    String.prototype.replace() The replace() method returns a new string with some or all matches of a p ...

  6. 浏览器兼容问题 chrome iframe location href

    报了个错 var dt2=new Date(d2Arr[0],d2Arr[1],d2Arr[2]); if(dt1>dt2){//比较日期 alert("开始日期不能晚于结束日期!&q ...

  7. 修改SqlServer字段长度

    Alter Table  [JHEMR].[dbo].[PT_ERROR_LOG]  ALTER COLUMN  MESS  nvarchar(1000)

  8. 有趣的keil MDK细节(转)

    源:有趣的keil MDK细节 1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed ch ...

  9. OPENCV直方图与匹配

    直方图可以用来描述不同的参数和事物,如物体的色彩分布,物体的边缘梯度模版以及目标位置的当前假设的概率分布. 直方图就是对数据进行统计的一种方法,并且将统计值定义到一系列定义好的bin(组距)中,获得一 ...

  10. HUST 1376 Random intersection

    神题.同学指教.1秒AC...http://blog.csdn.net/jtjy568805874/article/details/50724656 #include<cstdio> #i ...