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

需要准备两套或两套以上的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. 如何在vue框架中兼容IE

    IE目前已经放弃了自己的独特化,正一步步迎入互联网的主流怀抱.但迫于有用户存在,还是要兼容到IE8,9, 以上. 下面聊一下如何在vue框架中兼容IE 1.首先在index.html <meta ...

  2. Python建立Tab自动补全的脚本

    Python建立Tab自动补全的脚本 #!/usr/bin/python #python steup file import sys import readline import rlcomplete ...

  3. MySQL字符集不一致导致查询SQL性能问题

    今天做了一个MySQL数据库中的SQL优化. 结论是关联字段字符集不同,导致索引不可用. 查询的SQL如下: select `Alias`.`Grade`, `Alias`.`id`, `Alias` ...

  4. nginx + gunicorn + django 2.0 踩坑

    部署踩坑 部署踩坑提前准备服务器端准备安装nginx使用uwsgi部署使用gunicorn配置配置nginx配置django中的路径url 提前准备 在本地能够 python(3) manage.py ...

  5. ASE——热身作业自我介绍

    自我介绍 大家好我是王皓,由于之前忙于保研的机试和面试导致第一次作业就拖到第二次写blog的时候才交(非常抱歉..)我喜欢玩CTF,觉得学习安全方向的知识,寻找软件或者硬件的漏洞是一件非常有意义且有趣 ...

  6. hbase报错: hbase.PleaseHoldException: Master is initializing

    查看hbase服务状态报错:   hbase(main)::> status ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master ...

  7. 转。Nas配置。想找原版没找到,全是转载的,也没注出处,无语。

    随着家用宽带的不断提速和高清电影的普及外带单反的家庭占有率越来越搞,仅靠台式机里那几块硬盘越来越不够用了. 简单的计算了一下,家里的台式机上2T的容量(1T+640G+320G)已经接近于80%满,外 ...

  8. application/x-www-form-urlencode/multipart/form-data

    首先我们先认识下今天的application/x-www-form-urlencode/multipart/form-data属性所在的位置 1.form所属 在Form元素的语法中,EncType表 ...

  9. vue组件 is ref

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. String类型的时间大小比较

    不多废话,上代码   (String 的CompareTo方法比较仅仅限于同位数的字符串比较,格式.位数不一样比较结果会错误,原因是CompareTo比较源码是ASCII的比较) 代码一 packag ...