动态调用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面向对象之Javascript 继承
May 04 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Vue.use源码学习小结
Jun 20 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 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实现加减法验证码代码
2014/02/14 PHP
php实现RSA加密类实例
2015/03/26 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python中的id()函数指的什么
2017/10/17 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
思想专业自荐信范文
2013/12/25 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
优秀教师工作感言
2014/02/16 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
源码安装apache脚本部署过程详解
2022/09/23 Servers