JavaScript实现单页面多套CSS样式切换的两种方法

基于setAttribute的样式切换方案

本文探讨了如何利用JavaScript的setAttribute方法，在一个HTML页面中实现两套CSS样式表的切换效果。具体操作步骤如下：

首先，在HTML文档中引入样式表的link标签内定义一个唯一的id属性，例如将其命名为css。

 
<link href="1.css" rel="stylesheet" type="text/css" id="css">

此处将id设置为css，以便后续通过JavaScript获取该元素。

接下来，编写一个JavaScript函数来实现样式的切换逻辑。

 
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
} 
</script>

该函数的代码可以放置在页面的任意位置，通常建议放在head或body底部。

最后，在HTML元素中绑定事件，调用上述函数以触发样式切换。

 
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>

该方案已在IE和Firefox浏览器中测试通过。此方法允许用户自主选择显示的样式表，例如为视力较弱的用户提供字体较大的样式。需注意以下两点：

首先，定义函数时，function后的名称不能命名为links或link。若使用这两个名称，样式表可能无法正确切换，原因可能是它们与JavaScript的保留字或内置对象冲突。

其次，若切换的是整个页面的样式，确保在CSS文件中将body的高度设置为100%，以保证页面布局正常显示。

基于DOM操作的样式切换方案

方法二：

第一步：在HTML中导入两套CSS文件，分别设置不同的rel和title属性。

 
<link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" />
<link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" />

第二步：编写用于切换样式的JavaScript函数。

 
<script type="text/javascript">
var title = "样式A";
function setStyle(){
//仅用于在样式A和样式B之间切换
if(title=="样式A"){
title = "样式B";
}else{
title = "样式A";
} 
var i,links;
//使用DOM方法获取页面中所有的link元素
links = document.getElementsByTagName("link");
//遍历判断每个link元素，检查其rel属性是否包含style字符串，以确认其为样式表link，同时检查是否包含title属性
for(i=0; links[i]; i++){
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){
//将所有符合条件的link元素设为禁用状态
links[i].disabled = true;
//再次判断title属性中是否包含目标title字符串，若包含，则将当前link设为启用状态，即激活该样式
if(links[i].getAttribute("title").indexOf(title) != -1){
links[i].disabled = false;
//alert("ok");
} 
} 
} 
} 
</script>

第三步：在HTML标签中调用切换样式的JS函数。

 
<a href="#" onclick="setStyle();" >1</a>
<a href="#" onclick="setStyle();">2</a>
<a href="#" onclick="setStyle();">3</a>
<a href="#" onclick="setStyle();">4</a>
<a href="#" onclick="setStyle();">5</a>