用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();

时间: 2024-10-13 13:39:58

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

[转]页面换肤功能浅析

原理:通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤. Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) <ul id=

JS实现网页换肤功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实现网页换肤功能 -石家庄花卉出租 </ti

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

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

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

前言 说起换肤功能,前端应该是非常熟悉了?? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前端,前端从接口获取主题色在初始化的时候显示对应的主题色 3. 前面两者的结合,初始化的颜色设置,但也可通过前端的切换来更改主题色 拿到换肤需求后,就在思考该如何实现呢?? 先搜一下,看下有哪些方法 Ant Design 的更换主题色功能是用 less 提供的 modifyVars 的方式进行覆盖变

基于jQuery仿百度首页换肤功能代码

分享一款基于jQuery仿百度首页换肤功能代码.这是一款类似百度首页的自定义背景图片切换特效代码. 在线预览   源码下载 实现的代码. html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></d

Android实现换肤功能(一)

上周有个朋友给建议说讲讲换肤吧,真巧这周公司的工作安排也有这个需求,换的地方之多之繁,让人伤神死了.正所谓磨刀不误砍柴工,先磨下刀,抽出一个工具类,写了个关于换肤的简单demo. Android中换肤的实现有几种方法,我使用的是读取共享进程空间另一apk中的资源的方法.大致的原理如下,让你的app和一个只有资源文件的app运行在同一进程中,这样你的app就可以访问另一app的资源了.原理很简单,下面我们分步骤讲解实现过程. 一.共享进程运行的空间 通过在两个工程下的manifest根节点添加相同

Android学习之 换肤功能模块的实现&lt;二&gt;

在上篇中 主要有学习到皮肤资源内置到应用程序中 的方式实现换肤的 基本思路,本篇将继续以上篇的思路学习 皮肤资源内置的方式实现换肤效果.但本篇侧重于应用中换肤功能的代码设计实现上!切换的皮肤资源位于assets下不同的皮肤资源文件夹中. 本篇demo程序的代码结构如下: 本篇实现换肤功能的代码设计 UML类图如下: 本篇demo的换肤效果如下:               主要的实现代码在于: 1.SkinConfigManager.java 作用:皮肤配置管理,封装了SharedPrefere

Android实现换肤功能(二)

前两天写的上章关于换肤的功能获得了很好的反响,今天为大家介绍另一种方式.今天实现的策略也是网友建议的,然后我自己去写了个demo,大家自己评估下相比第一种方式的优势和劣势在哪里. 简单介绍下关于第一种关于换肤实现的方法一些不友好的地方,比如点击了换肤的功能键,需要先下载一个资源apk,然后再去引用其中的资源ID,于用户使用起来确实有有很多不便之处.今天为大家介绍的方法是克服了这一弊端的,可以实现直接在应用内切换,把资源文件存储在本地apk的,读取和操作也是更加便捷的,下面介绍下大致的一个实现逻辑

VS2010使用皮肤控件实现换肤功能

在我们平时使用的各种工具中,如QQ,迅雷,以及各种空间等,都提供了一些换肤功能,可以让我们选择各种我们喜欢的界面.本文就对VS中常用的窗口程序做一个简单的换肤,利用一个dll文件来进行实现. 首先我们要加载一个叫做IrisSkin2.dll的dll文件,通过“添加引用”,在应用里添加IrisSkin2.dll,就可以完成对这个dll的调用.然后在工具栏中添加一个SkinEngine的控件.可以在工具栏中添加一个选项卡,比如命名为Skin,然后右键单击,在选择项的.NETFramework组件中找