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

需要准备两套或两套以上的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. Linux NIO 系列(04-4) select、poll、epoll 对比

    目录 一.API 对比 1.1 select API 1.2 poll API 1.3 epoll API 二.总结 2.1 支持一个进程打开的 socket 描述符(FD)不受限制(仅受限于操作系统 ...

  2. CF1173X

    CF1173C 由于牌堆只能从最后插牌,所以插牌方法非常显然 首先特判一下牌堆有没有一个合法的后缀,如果有的话再判断一下手中的牌和合法后缀之前的牌的排列顺序能不能有效的继续续下去 然后排除了以上情况就 ...

  3. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...

  4. js将数字转换成货币形式的字符

    因为UI图上有的地方需要将数字转成货币形式的,例如:1234567转成  1,234,567  这样的,不过之前没弄过,然后在网上搜了下方法,参考了下面这篇文章 参考文章:JS将数字转成货币形式的简单 ...

  5. Arch安装墨刀（产品原型工具）

    Arch通过aur安装墨刀的时候报错,查看PKGBUILD发现下载地址错误("https://s3.cn-north-1.amazonaws.com.cn/modao/download&qu ...

  6. java中的继承、重载和覆盖是什么意思

    继承(英语:inheritance)是面向对象软件技术当中的一个概念.如果一个类别A“继承自”另一个类别B,就把这个A称为“B的子类别”,而把B称为“A的父类别”也可以称“B是A的超类”.继承可以使得 ...

  7. k8s-1.16 二进制安装

    环境机器配置: 172.16.153.70 master 172.16.77.121 node1 172.16.77.122 node2 系统初始化 [root@iZbp1c31t0jo4w553hd ...

  8. [人物存档]【AI少女】【捏脸数据】朴素风格

    点击下载(城通网盘):AISChaF_20191115113752642.png 点击下载(城通网盘):AISChaF_20191111232359711.png

  9. java——String类，时间类，格式化

    日期类 格式化

  10. 思维——cf1178E

    一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...