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

stylesheetjquery插件buttonfunction文档<link>标签

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

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

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

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

disabled=false;表示立即生效

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

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

<linkrel="alternatestylesheet"title="classic"href="css/style0.css"type="text/css"media="screen"/>

<linkrel="alternatestylesheet"title="silver"href="css/style.css"type="text/css"media="screen"/>

<linkrel="stylesheet"title="modern"href="css/style1.css"type="text/css"media="screen"/>

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

第二步：定义转换按钮：

<p>

<buttononclick="switchTheme('modern')"><imgstyle="width:126px;height:66px"src="img/t1.png"alt="Modern"/></button>

<buttononclick="switchTheme('silver')"><imgstyle="width:126px;height:66px"src="img/t2.png"alt="Silver"/></button>

<buttononclick="switchTheme('classic')"><imgstyle="width:126px;height:66px"src="img/t3.png"alt="Classic"/></button>

</p>

第三部：定义相关的js

functionswitchTheme(t){

$('link[title]').each(function(){

this.disabled=true;

this.disabled=(this.title!=t);

});

returnfalse;

};