动态调用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代码压缩器
Oct 12 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
详解JVM系列之内存模型
Jun 10 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编写注册后Email激活验证的实例代码
2013/03/11 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP之预定义接口详解
2015/07/29 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python numpy 点数组去重的实例
2018/04/18 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
《在家里》教后反思
2014/03/01 职场文书
社区维稳工作方案
2014/06/06 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python数字转对应中文的方法总结
2021/08/02 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS