这个效果就跟换肤效果差不多

需要准备两套或两套以上的css

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />
<script type="text/javascript">
function skin1(){
var a=document.getElementById('l1');
a.href='css1.css';
}
function skin2(){
var a=document.getElementById('l1');
a.href='css2.css';
}
</script>
</head>
<body>
<input type="button" value="orange" onclick="skin1()" />
<input type="button" value="yellow" onclick="skin2()" />
</body>
</html>

第一套css

 body{
background-color: orange;
}
input{
width: 50px;
height: 30px;
background-color: orange;
}

第二套css

 body{
background-color: yellow;
}
input{
width: 50px;
height: 30px;
background-color: yellow;
}

JS切换的更多相关文章

  1. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  2. Tab标签js切换高效率写法

    原来的传统写法: function tabit(id,cid) { for(var i=0; i<10; i++){ gi(["tab"+i]).className = &q ...

  3. easyui字典js 切换 jsp页面显示的内容

    在列表中直接切换 formatter: function (value) {var name;if(value==0){name='待审批'}else if(value==1){name='通过'}e ...

  4. 记录一个js切换随机背景颜色的代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. js 切换图片

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  6. js 切换全屏

    公司有一个需求就是点击某一个按钮实现全屏切换功能,然后呢我就在网上扒了段代码.封装了一下.使用的小伙伴们可以看看哦! 切换全屏代码 <!DOCTYPE html> <html> ...

  7. 简单js 切换左侧栏目的样式

    这是html代码,里面写了left.html <div id='mydiv'> <a class='qwe'>1</a> <a class='qwe'> ...

  8. js 切换隐藏

    先试试 显示\隐藏切换 脚本之家欢迎您 切换隐藏 <style type="text/css"> #thediv { width:200px; height:100px ...

  9. node.js切换多个版本

    开言 试用场景就是我们开发项目的时候,有可能一个项目需要v10版本,另一个项目需要v8版本,遇到这种问题,我们不能卸载再重新安装对应的版本去开发,遇到这样的问题的时候,那我们就可以去用另一种方式去切换 ...

  10. js切换全屏

    直接撸代码 //<a id="fullscreen">切换按钮</a> $('#fullscreen').bind('click',function () ...

随机推荐

  1. Python测试代理ip是否有效

    方式一: 通过icanhazip.com返回的ip地址进行检测 import requests '''代理IP地址(高匿)''' proxy = { 'http': 'http://117.85.10 ...

  2. JS数组中Array.of()方法的使用

    Array.of()方法的使用: Array.of()方法用于将一组数值转换为数组,举例: const a = Array.of(2,4,6,8); console.log(a); // [2,4,6 ...

  3. element UI datepicker组件限制可选日期范围

    长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...

  4. Mybatis-概况

    是什么 官网定义 http://www.mybatis.org/mybatis-3/ 百科定义(维基百科) https://en.wikipedia.org/wiki/MyBatis Github: ...

  5. 让Nginx路径中的子目录匹配文件夹的另一种写法

    其实相当于对路径做一种通配符,根据路径名访问相应的文件夹.直接看高潮部分如下.. location /static { root /var/www/usmt; index index.html boa ...

  6. thrift 的required、optional探究

    原因 经常使用thrift来编写rpc通信,但是对下面两个问题还是有些疑惑 thrift 的required.optional和不写有什么区别 optional不设置isset的话被传输后值? 实验 ...

  7. java多线程面试题选择题大全含答案

    v java多线程面试题选择题大全含答案 java多线程面试题选择题大全含答案 1.下面程序的运行结果()(选择一项)public static void main(String[] args) {T ...

  8. C++如何阻止一个类被实例化

    (1)定义一个无用的抽象函数,使得类成为抽象类 (2)将构造函数定义为private. 为什么要这样做? 一些工具类,没有被实例化的必要.

  9. mysqldump 导出数据库

    mysqldump -h47.52.67.230 -P3306 -uroot -pAbc\!@#456789 --hex-blob --opt test_fooku_db >/home/test ...

  10. Delphi GlobalAlloc、GlobalLock、GlobalUnlock、GlobalFree 函数

    GlobalAlloc 函数 分配一块内存,该函数会返回分配的内存句柄. GlobalLock 函数 锁定内存块,该函数接受一个内存句柄作为参数,然后返回一个指向被锁定的内存块的指针. 您可以用该指针 ...