styleSheet的动态修改

对于styleSheet的修改，IE是可以直接操作的：

document.styleSheets[ 1 ].href  =   " css/fontsize10.css " ;     // IE

但是，根据DOM文档中对styleSheet的接口定义：

//  Introduced in DOM Level 2:
interface StyleSheet  ... {
  readonly attribute DOMString    type;
                   attribute boolean        disabled;
  readonly attribute Node             ownerNode;
  readonly attribute StyleSheet    parentStyleSheet;
  readonly attribute DOMString    href;
  readonly attribute DOMString    title;
  readonly attribute MediaList      media;
} ;

href属性是readonly的，因此FireFox等遵循标准模型的浏览器就只能取得而不能修改属性了。

为了满足动态地修改页面的shyleSheet的需求（比如：页面整体风格的动态替换等），只能通过别的途径来实现了。
我的方法其实很简单，用innerHTML就可以了：
1.将“link”定义在"span"中：

< span id = " globalCss " >< link rel = " stylesheet "  type = " text/css "  href = " css/fontsize10.css " ></ span >

2.通过 innerHTML来修改整体的link内容：

     function  changeCss(type)  ... {
    
        var obj = document.getElementById("globalCss");
            
        switch( type ) ...{        
        
            case "s":                
                obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize10.css">';    //FF,Opera
                document.styleSheets[1].href = "css/fontsize10.css";    //IE
                break;
            
            case "m":
                obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize14.css">';
                document.styleSheets[1].href = "css/fontsize14.css";
                break;
            
            case "l":
                obj.innerHTML = '<link type="text/css" rel="stylesheet" href="css/fontsize16.css">';
                document.styleSheets[1].href = "css/fontsize16.css";
                break;
        }
    }

对于IE，还是使用了直接修改的方法。