4当前位置:网页制作JavaScript教程Js控制CSS切换样式表实现网页风…
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·浅谈JavaScript中定义变量时有无var声明的区别
·通过Jquery获取URL参数并转码
·Javascript获取时间间隔的方法
·Javascript获取视频时长
·javascript中双感叹号(!!)作用示例介绍
·javascript:void(0)使用探讨
·JS设置下拉框为只读的方法
·JS转化毫秒为时间格式代码
·Js控制CSS切换样式表实现网页风格切换
·网页更换皮肤样式功能浅析
4热门网页制作
·网页自动适应客户端分辨率的实现
·JS网页加载进度条
·突破IE屏蔽限制弹出新窗口
·三级下拉联动链接菜单
·文本框控制字数和禁止粘贴
·33个JavaScript经典效果
·JS获取页面地址栏参数
·JavaScript去除空格的三种方法
·又一个全国省市双级联动下拉选择框
·全国省市县无刷新多级联动菜单
4相关网页制作
·JS实现表单之间的数据传递
·JS获取网页HTML元素的方法分析
·JS计算汉字笔画数
·Javascript定时关闭广告页面
·JS实现划词标记与划词搜索功能
·很实用的动态提示的下拉框
·jQuery中10个非常有用的遍历函数
·ajax跨域的三种方法
·解决IE6下DIV层被SELECT下拉框遮挡的问题
·完美解决IE6弹出层(DIV)被下拉框(Select)遮挡问题
Js控制CSS切换样式表实现网页风格切换
类别:JavaScript教程    来源:网络    时间:2014/2/4    贴士:推荐给好友
收藏本页 8 
  看到别人网站都有一个无刷新切换风格的功能,自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能。

  首先,我们需要自己写好几种CSS风格文件,这就是接下来要切换的CSS文件。比如“红色记忆”这款网页风格你可以保存为1.css,“绿草青青”你可以保存为2.css,蔚蓝天空可保存为3.css。各个CSS里面的代码那就靠你发挥自己的想像力了,这是你的事,我可不愿管这些。

  各个CSS代码文件写成后,请按下面的方式引入到网页中:
<link rel="stylesheet" type="text/css" href="style/1.css" title="CSS1" ID="CSS1">
<link rel="stylesheet" type="text/css" href="style/2.css" title="CSS2" ID="CSS2" DISABLED>
<link rel="stylesheet" type="text/css" href="style/3.css" title="CSS3" ID="CSS3" DISABLED>


  下面我们就需要用JS来控制上面几个CSS文件的切换,也就是无刷新切换CSS样式表,JavaScript代码如下:
<script type="text/javascript">
function changeCss(id){
 for(var i=1;i<5;i++){
 if(i==id)
  document.getElementById("CSS"+i).disabled=false;
 else
  document.getElementById("CSS"+i).disabled=true;
 }
}
</script>


  Js写好了,下面还需要一步,那就是让用户通过点击相应的切换风格链接去调用Js函数,从而让JS去控制样式的切换,你可以把下面的代码放在你网页的右上角,让用户点击方便:
切换网页风格:
<a href="javascript:changeCss(2)">红色记忆</a>
<a href="javascript:changeCss(2)">绿草青青</a>
<a href="javascript:changeCss(2)">蔚蓝天空</a>


  好了,一个无刷新切换风格的基本实现思路和代码就是这样了,剩下的就是你去不断完善了。
·上一篇:网页更换皮肤样式功能浅析
·下一篇:JS转化毫秒为时间格式代码
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号