zoukankan
html css js c++ java
JS无聊之作——换肤切换样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>换肤</title> <style type="text/css"> body{font-size:12px} *{margin:0;padding:0;} ul,li{list-style:none} .login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;215px;color:#333;line-height:25px;margin:25px 0px 25px 10px;padding-left:15px;} .login_skin li{float:left} .login_skin .bor{border-right:1px solid #e9e8e5; padding-right:7px; margin-right:10px} .login_skin li span{margin:7px 4px 0px 0px;cursor:pointer;display:block} .login_skin li span em{display:block;height:9px;10px;overflow:hidden;text-indent:-9999px} .login_skin a{color:#333;text-decoration:none; margin-right:5px} .login_skin li .on{ border:1px solid #333;cursor:default} h2{font-size:12px; padding:8px 0px 10px 15px} #sk_blue{background:#2086b3;} #sk_or{background:#e64c13} #sk_byu{background:#b7a37a;} #warpper{overflow:hidden;height:1%} .contentl{margin-right:-244px;float:left;100%} .contentr{230px;float:right;} .main{margin-right:254px;margin-left:10px;height:300px} .footer{height:30px;margin:30px 10px 0px 10px} .blue .content{background:#2086b3;color:#fff;} .blue .bb{border:2px solid #2086b3;} .blue .bb h2{ color:#2086b3} .blue .footer{background:#2086b3;} .or .content{background:#e64c13} .or .bb{border:2px solid #e64c13;} .or .bb h2{ color:#e64c13} .or .footer{background:#e64c13;} .byu .content{background:#b7a37a;color:#f00} .byu .bb{border:2px solid #b7a37a;} .byu .bb h2{ color:#b7a37a} .byu .footer{background:#b7a37a;} </style> <script type="text/javascript"> function setOnloadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "function"){ window.onload = func; } else{ window.onload = function(){ oldonload(); func(); } } } // --- 设置cookie function setCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } //--- 获取cookie function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function skin(){ if(!document.getElementsByTagName) return false; if(!document.getElementById("skin")) return false; var skin_id="blue"; if(getCookie("id")!=null){ skin_id=getCookie("id"); } var span_id=skin_id+"_sp"; var span_on=document.getElementById(span_id); document.body.className=skin_id; span_on.className="on"; var skinType=document.getElementById("skin"); var skin_nub=skinType.getElementsByTagName("em"); for(var i=0; i<skin_nub.length;i++){ skin_nub[i].onclick=function(){ var em_id=this.getAttribute("id"); var skin_id=em_id.split("_")[1]; var spanList=document.getElementsByTagName("span"); for(var j=0;j<spanList.length;j++){ spanList[j].className=""; if(spanList[j].getAttribute("id").indexOf(skin_id)!=-1) { spanList[j].className="on"; } } document.body.className=skin_id; setCookie("id",skin_id,1); } } } setOnloadEvent(skin); </script> </head> <body> <div id="header"> http://www.oldzz.com <div class="login_skin" id="skin"> <ul> <li>选择页面风格:</li> <li><span id="blue_sp"><i id="sk_blue">ee</i></span></li> <li><span id="or_sp"><i id="sk_or">ere</i></span></li> <li><span id="byu_sp"><i id="sk_byu">ere</i></span></li> </ul> </div> </div> <div id="warpper"> <div class="contentl" > <div class="main bb"><h2>换肤测试</h2></div> </div> <div class="contentr bb" ><h2>换肤测试</h2></div> </div> <div class="footer"></div> </body> </html>
RunCode
CopyCode
作者:
Cat Qi
出处:
http://qixuejia.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
查看全文
相关阅读:
LINQ进阶(深入理解C#)11 查询表达式和LINQ to Objects
(转)Dinktopdf在.net core项目里将Html转成PDF(支持liunx)
asp.net core 实现 face recognition 使用 tensorflowjs(源代码)
fastreport-使用JSON做为数据源报表
分享我的第一个RPA练习
关于性能优化技巧
Sql 增删改查语句
将结果集插入另一个表中
Vue+elementUI 表格 增删改查 纯前端 最终版
【JAVA】使用IntelliJ IDEA创建 maven的quickStart项目
原文地址:https://www.cnblogs.com/qixuejia/p/1839328.html
最新文章
20张图带你到HBase的世界遨游【转】
网络四层、七层负载均衡的区别
把nacos安装成windows服务
重温 ShardingSphere 分布策略
Mysql 存储引擎的区别以及索引查询失效的情况
React + Fabric + ImageMagick 实现大图片DIY个性化定制
imagemagick 之 Fred's ImageMagick Scripts 在Ubuntu 下的实践
如何配置spring boot解决前端刷新不会停留在原路径问题?
怎么使用Visual Paradigm建ER图?
mysql8版本数据迁移
热门文章
linux的ping命令属于OSI七层模型的哪一层?
在SecureCRT用vi命令进入文本编辑后,窗口下方为什么会出现如[39;12H这样奇怪的符号
通过SecureCRT的lcd实现linux和windows跨操作系统的文件下载上传
Elastic Search.NET -NEST使用(1)
Automapper 的ying'yong
《C#深入理解3册》async和await异步编程
文件与文件夹的完全复制
ExpandoObject, DynamicObject, DynamicMetaObject
decimal 去掉小数点后的无效0
word转PDF (含NET CORE)
Copyright © 2011-2022 走看看