js实现单一html页面两套css切换

第一步：导入两套css文件

[html]
<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" />

[html]
<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元素中是否含有style字符串，用来判断此link元素为样式表link ，同时判断此link是否包含title属性
    for(i=0; links[i]; i++){
        if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){
            //把所有link设为disabled
            links[i].disabled = true;
            //再来判断title中是否有指定的title字符串有则把当前的link设为可视即激活当前的link
            if(links[i].getAttribute("title").indexOf(title) != -1){
                links[i].disabled = false;
                //alert("ok");
            }

        }
    }
}

</script>

var title = "样式A";

</script>第三步：在html标签中调用切换的js函数

[html]
<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>

补充：web前端 , JavaScript ,