通过按钮实时切换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
投稿猜你喜欢
- 本文实例讲述了PHP简单实现冒泡排序的方法。分享给大家供大家参考，具体如下：<?php$files = array("fil
本文实例讲述了Python Web框架之Django框架文件上传功能。分享给大家供大家参考，具体如下：上传方式：- Form表单上传文件-- 0x00 起因接触网安快一年了，爱收集一些字典啊敏感目录文件啊什么的。收集多了难免有重复，并且有的也需要合并使用方便。自己就写了一个小小的脚
- 在编写自动化测试用例的时候，每次登录都需要输入验证码，后来想把让python自己识别图片里的验证码，不需要自己手动登陆，所以查了一下识别功能
- 前言：列表框控件显示多行文本，用户可以选中一行或者多行。所有的文本只能使用一种字体，不能混合使用多种字体。1 属性常用的参数列表如下：1.1
- 比如新浪微博发微博的输入框有一个已输入字数的统计，它的规则推测是：汉字和中文标点算 1 个字数，英文和其他符号算 0.5 个字数。不足 1
- v-model 最好用的就是配合 data 達成 Two-way Binding，但若使用 Vuex 之後，是否還能使用 v-model 搭
- 遇到一个很实际的问题：由于不想增加目录的深度，减少磁盘寻址的时间，需要减少一些目录层级。大家都知道建立文件夹是为了让文件管理更加的方便，现在
- 1.什么是虚拟DOM 以前M的命令式操作DOM即使用jQuery操作DOM节点，随着状态的增多，DOM的操作就会越来越频繁，程序的
- 前言：博主在刚接触Python的时候时常听到GIL这个词，并且发现这个词经常和Python无法高效的实现多线程划上等号。本着不光要知其然，还
- 列表生成式基础语法[exp for iter_var in iterable (if conditional)]原理:首先迭代 iterab
- 1.字符串大小写转value = "wangdianchao"# 转换为大写big_value = value.uppe
- 作为开发者，我们可以通过以下3中方式来配置logging:1）使用Python代码显式的创建loggers, handlers和format
- 基于Vue的页面切换左右滑动效果，具体内容如下HTML文本页面：<template> <div id="app&
- “网页设计三剑客”可能很多新同学都没听说过，因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是Macromedia公司旗下Dreamwe
- tf定义了tf.app.flags，用于支持接受命令行传递参数，相当于接受argv。import tensorflow as tf#第一个是
- 一、圆周率的历史1、中国魏晋时期，刘徽曾用使正多边形的边数逐渐增加去逼近圆周的方法 (即「割圆术」),求得π的近似值3.1416。汉朝时，张
- 关于MySQL8的WITH查询学习前言：对于逻辑复杂的sql，with可以大大减少临时表的数量，提升代码的可读性、可维护性MyS
- 如图：会出现带有红色波浪线，但是确实有random_walk文件解决方法：在当前文件下，右键找到mark Directory as然后选择s
- 如图，面对一团糟代码的你~~~真的想说，What F~U~C~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主
