动态调用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 相关文章推荐
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
Position属性之relative用法
Dec 14 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
小程序实现文字循环滚动动画
Jun 14 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
查看Django和flask版本的方法
2018/05/14 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
大学生通用个人自我评价
2014/04/27 职场文书
应届毕业生求职信
2014/05/26 职场文书
实验室标语
2014/06/21 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
综治目标管理责任书
2015/05/11 职场文书
院系推荐意见
2015/06/05 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB