利用link标签rel="alternate&…

标签

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

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

 

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

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

disabled = false;表示立即生效

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

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

[html] view plain copy

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

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

第二步：定义转换按钮：

[html] view plain copy

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

第三部：定义相关的js

[html] view plain copy

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

      这样就可以动态的改变整体页面的皮肤了。