document.styleSheets以及js中实现样式表的切换、样式的增加减少

document.styleSheets代表了文档中单一的样式表。

document.styleSheets可以返回由网页中所用到的样式表组成的数组，但是不包括直接嵌在元素里的style。

例如：

上面代码弹出的对话框显示2。至于样式表在数组里的顺序由定义时的顺序决定，如上document.styleSheets[0]返回设定字体大小的style，document.styleSheets[1]返回样式表firstCSS.css。

js可以控制样式表的切换，用到的是disabled属性，如上，若要屏蔽掉样式表firstCSS.css，可以加入下面语句:

 注意不可以用href来设置，因为在Firefox里href是一个readonly的参数。

另外，还可以添加和删除样式表里的具体项，IE和Firefox用到了不同的函数：

Firefox里用cssRules属性返回样式表的所有项目，

 而IE中则用rules达到同样的效果。

Firefox和IE中添加项目所用函数也不一样，如下： 

 看下面一段代码：

具体应用实例:

 

<link type="text/css" rel="stylesheet" href="yuexiuweb.com_files/style_1.css">
<link type="text/css" rel="stylesheet" href="yuexiuweb.com_files/style_2.css">
<script type="text/javascript">
var doAlerts=false;
function changeSheets(whichSheet){
    whichSheet=whichSheet-1;
    console.log(document.styleSheets);
    if(document.styleSheets){
        var c = document.styleSheets.length;
        if(doAlerts)
        alert('Change to Style '+(whichSheet+1));
        for(var i=0;i<c;i++){
            if(i!=whichSheet){
                document.styleSheets[i].disabled=true;
            }else{
                document.styleSheets[i].disabled=false;
            }
        }
    }
}
</script>
</head>
//切换样式~~
        <div class="part">
            <a class="a1" href="javascript:changeSheets(1)">小图标</a>
            <a class="a2" href="javascript:changeSheets(2)">大图标列表</a>
        </div>