<link>标签
rel="stylesheet"属性指定将一个样式表立即应用到文档.
rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它
通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表
disabled = true;表示它不会立即生效
disabled = false;表示立即生效
本人用了jquery插件,使用方法如下:
第一步:定义多个样式表:
<link rel="alternate stylesheet" title="classic" href="css/style0.css" type="text/css" media="screen"/>
<link rel="alternate stylesheet" title="silver" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" title="modern" href="css/style1.css" type="text/css" media="screen"/>
定义了3个外链样式表,其中使style1.css生效
第二步:定义转换按钮:
<p>
<button onclick="switchTheme('modern')"><img style="width:126px;height:66px" src="img/t1.png" alt="Modern"/></button