动态调用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 相关文章推荐
初识javascript 文档碎片
Jul 13 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
JavaScript实现区块链
2018/03/14 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
nohup的用法
2012/11/26 面试题
方正Java笔试题
2014/07/03 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
公司庆典欢迎词
2015/01/26 职场文书
工作收入证明范本
2015/06/12 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL