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，还是使用了直接修改的方法。