动态调用css文件——jquery的应用


Posted in Javascript onFebruary 20, 2007

算是翻译吧,原文:http://15daysofjquery.com/style-sheet-switcheroo/12/

可以应用的范围很广,尤其是用标准构架的网站,比如说pjblog就可以,只要通过简单的点击,就可以让网站在瞬间换个皮肤,当然可以通过其他方法实现,这里通过jquery来实现,优点是代码简洁,可读性强
首先放上代码

$(document).ready(function() 
{ 
        $('.styleswitch').click(function() 
        { 
                switchStylestyle(this.getAttribute("rel")); 
                return false; 
        }); 
        var c = readCookie('style'); 
        if (c) switchStylestyle(c); 
}); function switchStylestyle(styleName) 
{ 
        $('link[@rel*=style]').each(function(i) 
        { 
                this.disabled = true; 
                if (this.getAttribute('title') == styleName) this.disabled = false; 
        }); 
        createCookie('style', styleName, 365); 
}

这里说明一下:
$('.styleswitch').click
这一句是对所有classname为styleswitch的对象定义点击事件,在jquery里用"#"表示id,比如$("#my_id")就可以定位到id为my_id的对象,定位classname为".",而定位tagName则不加任何修饰符,比如$("p"),就是定位到所有p对象

readCookie和createCookie是两个自定义函数,这里没有给出来

$('link[@rel*=style]').each(function(i) 

这句话的意思是定位到link标签,其中有rel属性,并且rel属性里要包含style,对每一个这样的对象制定函数
this.disabled = true; 

这句话的意思是使当前的对象失效

function switchStylestyle(styleName)  
{  
    $('link[@rel*=style][@title]').each(function(i)   
    {  
        this.disabled = true;  
        if (this.getAttribute('title') == styleName) this.disabled = false;  
    });  
    createCookie('style', styleName, 365);  
} 

这个函数的作用就是选择当前的样式
$('link[@rel*=style][@title]').each(function(i) 
有了前面的知识,这句话应该就不难理解了吧,就是所有标签名为link,包含rel属性,且rel属性里要包含style,同时还要有title属性的对象,每一个都执行相应的函数

下面来看看主页面的内容 

   

 <link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />  
    <link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />  
    <link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

这里rel="alternate stylesheet",使得当前的css不会应用到当前的文档,而只是备用 
<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>  
<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>  
<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>

这些就是点击后改变样式部分的代码,我们注意到有rel属性,有class属性,这些都是方便定位用的 示例:http://www.healdream.com/upLoad/html/jquery/styleswitch/

下载:http://www.51files.com/?YTXG82NKA8FA6TIKE4M0

Javascript 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
js压缩利器
Feb 20 #Javascript
通过jquery实现tab标签浏览效果
Feb 20 #Javascript
用jquery来定位
Feb 20 #Javascript
NiftyCube——轻松实现圆角边框
Feb 20 #Javascript
nicejforms——美化表单不用愁
Feb 20 #Javascript
greybox——不开新窗口看新的网页
Feb 20 #Javascript
datePicker——日期选择控件(with jquery)
Feb 20 #Javascript
You might like
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript深入理解js闭包
2010/07/03 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python如何在循环引用中管理内存
2018/03/20 Python
Windows下python3.7安装教程
2018/07/31 Python
python动态规划算法实例详解
2020/11/22 Python
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
表彰先进集体通报
2014/01/12 职场文书
初二物理教学反思
2014/01/29 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
导游个人求职信
2014/04/25 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript