Mobile Menu Will Come Here.
隐藏
柏港 Jquery

利用link标签rel="alternate stylesheet"属性实现界面动态换肤

发布：2015/6/16 3:15:47作者：管理员 来源：本站 浏览次数：1399

<link>标签

rel="stylesheet"属性指定将一个样式表立即应用到文档.

rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它

 

通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表

disabled = true;表示它不会立即生效

disabled = false;表示立即生效


本人用了jquery插件，使用方法如下：

第一步：定义多个样式表：

[html] view plaincopy
  1. <link rel="alternate stylesheet" title="classic" href="css/style0.css" type="text/css" media="screen"/>  
  2. <link rel="alternate stylesheet" title="silver" href="css/style.css" type="text/css" media="screen"/>  
  3. <link rel="stylesheet" title="modern" href="css/style1.css" type="text/css" media="screen"/>  

   定义了3个外链样式表，其中使style1.css生效


第二步：定义转换按钮：


[html] view plaincopy
  1. <p>  
  2.     <button onclick="switchTheme('modern')"><img style="width:126px;height:66px" src="img/t1.png" alt="Modern"/></button>  
  3.     <button onclick="switchTheme('silver')"><img style="width:126px;height:66px" src="img/t2.png" alt="Silver"/></button>  
  4.     <button onclick="switchTheme('classic')"><img style="width:126px;height:66px" src="img/t3.png" alt="Classic"/></button>  
  5. </p>  

第三部：定义相关的js

[html] view plaincopy
  1. function switchTheme(t) {  
  2.     $('link[title]').each(function(){  
  3.     this.disabled = true;  
  4.     this.disabled = (this.title != t);   
  5.     });  
  6.         return false;  
  7. };  

    这样就可以动态的改变整体页面的皮肤了。
　jQuery实现无刷新切换主题皮肤功能
jQuery动态加载css文件说明　

柏港为您推荐了一些相关资讯

利用link标签rel="alternate stylesheet"属性实现界面动态换肤

© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4