用js来实现页面的换肤功能(带cookie记忆)
用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记忆)的更多相关文章
- JS实现网页换肤功能效果
网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- 【转】Javascript+css 实现网页换肤功能
来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...
- 基于webpack4+vue-cli3项目的换肤功能
起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...
- Android QMUI实战:实现APP换肤功能,并自动适配手机深色模式
Android换肤功能已不是什么新鲜事了,市面上有很多第三方的换肤库和实现方案. 之所以选择腾讯的QMUI库来演示APP的换肤功能,主要原因: 1.换肤功能的实现过程较简单.容易理解: 2.能轻松适配 ...
- 一种简单的实现:Android一键换肤功能
现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...
- .NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能
IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. Iri ...
- Android 换肤功能的实现(Apk插件方式)
一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...
随机推荐
- OpenGL学习--------动画制作
假设某动画一共有n幅画面,则它的工作步骤就是:显示第1幅画面,然后等待一小段时间,直到下一个1/24秒显示第2幅画面,然后等待一小段时间,直到下一个1/24秒……显示第n幅画面,然后等待一小段时间,直 ...
- ListView遍历每个Item出现NullPointerException的异常处理(转)
在使用ListView过程中我们有时候需要遍历取得每个Item项中的一些数据(比如每个Item里面有TextView,需要获取它的文本等等),但是我们在遍历过程中经常会遇到NullPointerExc ...
- BNUOJ 6038 - Reaux! Sham! Beaux!(模拟)
这是一个水模拟,但是因为图片看不清,手打比较烧脑,我们错了好多次才过 #include<stdio.h> #include<iostream> #include<stri ...
- 打包Egret游戏为Chrome extension
今天,本来是打算做一个Chrome扩展去爬取网站base64编码图片的. 在跟着图灵社区<Chrome扩展及应用开发>敲demo代码的过程中,发现chrome的扩展的结构理论上可以兼容所有 ...
- 请问如何在PS中将一张图标里的各个小图标分离成一个个图标?
1.用切片工具比较简单快捷,把要切的图标一个个的切画出来,切好后存储保存格式为web,导出时候会出现一个images文件里面就是刚切好的图片 2.用裁剪的方式裁剪你要小图标,(你可以记住第一个裁剪的长 ...
- oracle 主键自动增长
oracle 主键自动增长 2009-12-11 16:07:00| 分类: 数据库资料|字号 订阅 这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create tabl ...
- web.xml的启动顺序
1. context-param 2. Listener 3. Filter 4. servlet <?xml version="1.0" encoding="UT ...
- 添加<!doctype html>后造成JS写的定位失效
今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>. 这样子定位并不起效果: document.getEle ...
- HDU 1589 Find The Most Comfortable Road 最小生成树+枚举
find the most comfortable road Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- POJ 1584 A Round Peg in a Ground Hole
先判断是不是N多边形,求一下凸包,如果所有点都用上了,那么就是凸多边形 判断圆是否在多边形内, 先排除圆心在多边形外的情况 剩下的情况可以利用圆心到每条边的最短距离与半径的大小来判断 #include ...