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

需要准备两套或两套以上的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. shell编程：函数的返回值

    函数的返回值两种形式 return 0-255 0表示成功,1-255表示失败-------通常用于判断 echo 返回一个字符串------------通常用于返回一个执行的结果 return.sh ...

  2. Excel解析工具POI

    HSSFWorkbook:是操作Excel2003以前(包括2003)的版本,扩展名是.xls XSSFWorkbook:是操作Excel2007的版本,扩展名是.xlsx 对于不同版本的EXCEL文 ...

  3. 学习JS基本数据类型与对象的valueOf方法

    https://blog.csdn.net/licheng11403080324/article/details/60128090 https://yq.aliyun.com/articles/399 ...

  4. call和apply实现的继承

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

  5. JS提示信息来检测相应id的标签

    2015-07~2015-08 (其中$为document.getElementById()) 使用span提示信息来检测相应id的标签,没有返回值 infoTips("LRYH" ...

  6. android 拖拉和放大

    public class MainActivity extends Activity { private ImageView imageView; @Override public void onCr ...

  7. WPF gridcontrol 后台代码清除过滤筛选条件

    WPF 后台清除gridcontrol过滤筛选条件: ColumnName:列名 user_GridControl:gridcontrol控件名 user_GridControl.ClearColum ...

  8. Codeforces Round #556 CF1149D Abandoning Roads

    这道题并不简单,要得出几个结论之后才可以做.首先就是根据Kruskal求最小生成树的过程,短边是首选的,那么对于这道题也是,我们先做一次直选短边的最小生成树这样会形成多个联通块,这些联通块内部由短边相 ...

  9. isPrototypeOf，hasOwnProperty

    在看jquery源码的过程中,了解到isPrototypeOf属性.此属性只是Object.prototype的自有属性,即: Object.prototype.hasOwnProperty('isP ...

  10. python入门学习一

    本文用来记录学习python过程中所遇到的不同的或者记忆不清的一些定义. 注释 注释用# #此处是注释 n = 123 f = 456 不转义 Python中r‘  ’表示字符串默认不转义 print ...