通过按钮实时切换CSS样式 实现CSS换肤的实例
作者：52css 来源：52css 发布时间：2008-07-17 12:55:00
标签：皮肤,换肤,css,教程
CSS换肤技术一直是一个比较热门的话题，通过给HTML文档不同的CSS样式应用，实现完全不同或风格迥异的页面效果。这样的技术一直为大家所津津乐道。今天所讲的是用按钮来实现简单的换肤。或许实用性并不强，不能写入cookies，就不能按用户的意愿保存下来，每一次刷新将回到默认的风格样式。但大家可以学习其原理，了解它的工作方式。
我们来看今天的案例。在页面中建立一个容器，赋予id为wrap。在里面放两个按钮，通过点击按钮触发HTML文件调用不同的CSS，从而实现换肤的效果。
这两个按钮如图所示。
在默认状态下是a.css。点击按钮后，则应用所点击按钮定义的样式。
一种是蓝色的背景图片，一种是橙色的背景图片。这两者使页面具有了不同的风格气息。
HTML代码如下：
<div id="wrap">
<input type=button value="a.css" onclick="document.all.MrJin.href='a.css'"><br>
<input type=button value="b.css" onclick="document.all.MrJin.href='b.css'">
</div>
a.css的代码如下：
body { margin:0; padding:0; background:url(bg_a.gif);}
#wrap { height:600px; background:url(52css.jpg) no-repeat center center;}
b.css的代码如下：
body { margin:0; padding:0; background:url(bg_b.gif);}
#wrap { height:600px; background:url(52css.jpg) no-repeat center center;}
0
投稿猜你喜欢
- JavaScript中的XMLHttpRequest和XML DOM首先，我们需要建立一些规则。特殊的XMLHttpRequest对象和一般
- 一、备份数据库1、打开SQL企业管理器，在控制台根目录中依次点开Microsoft SQL Server2、SQL Server组-->
- 没事在这里发一下关于数据库大批量插入数据的效率对比，用ACCESS和MSSQL，数值是在本机测试，根据不同的环境和配置，数值可能会有较大差别
- 本文实例介绍了如何使用ASP代码来读写注册表，呵呵厉害吧！ 一个例子: <％Dim ReadComputerNam
- 这个主要应用于，获取用户输入的时候，防止用户不小心，多输入了一个空格，导致验证无法通过，多用于用户名跟密码的，好多情况下，大家复制的winr
- 你可能正建立自己在网上的家-WEB页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有
- 一直以来，JS前端代码因为必须经过IE明文解析，某些加密的JS如：JScript.Encode也因为树大招风，早就被人破解了。还有些加密的手
- 我们在网页中使用CSS来设置网页、表格和字体大小，一般使用的是网络上较流行的9磅字：<STYLE type=TEXT/CSS
- 我想把本篇作为css基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分，单独发表，其间可能会插
这不仅仅是一个信息 * 的时代，也是一个服务 * 的时代。一切都是因为互联网，随着互联网技术的发展，信息的增多，服务的增多，用户需求的多样化。怎- 颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户
- 代码如下:---在仓储管理中经常会碰到的一个问题 一、关于LIFO与FIFO的简单说明 ---FIFO: First in, First o
- 日前，Mozilla 的 Arun Ranganathan 向 W3C 提交了一个草案，旨在推出一个 JavaScript API，让 Ja
- 在用户登录windows操作系统的时候，如果触发到了登录表单的密码录入框上，并且此时按下了“大写锁定键(Caps Lock)”，那么界面上会
- 大量的多行段落本身就会降低可读性，同时空行分段也比空格分段有更高的可适应性...前文讨论的热烈程度远超我预期，正好还有之前查阅资料拍的几张实
- 设计网站的同志背景主要有两种：学计算机、学艺术。基本上会写代码的不懂设计，会设计的不懂代码，这个格局似乎到今天还没变。某些学计算机的同学，有
- asp过滤留言中脏话的代码例子<!--#include file="../conn/dbconn1.asp"--&
- OL定义有序列表的时候，除非指定list-style-position:inside;，否则文字和前导符是有缩进的。但有的时候，OL定义的列
- 什么是RSS？RSS是站点用来和其他站点之间共享内容的一种简易方式（也叫聚合内容），通常被用于新闻和其他按顺序排列的网站，例如Blog。一段
- 和大多数的语言脚本一样，学习ASP最好的方法就是亲身尝试ASP，使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
