javascript动态创建stylesheet

应用场景：

ext的grid中row背景和字体颜色，需要通过读取数据库中配置的颜色来渲染grid。

模块结构：

已经有一个页面进行配置信息的CRUD了，数据库中存储的值形如：#99CCFF
这部分代码就不贴了。

曲折的第一步：
对了本文介绍的模块是基于Extjs3.2版
读取数据：

//获取的级别配置信息
		   var levelArry = null;
//获取配置数据
		    Ext.Ajax.request({
		    	url:'warnlevel.do?method=queryWarnlevelssIsOpen&temp='+new Date(),
		    	success: function(response,options){
		    		levelArry = (Ext.decode(response.responseText));
		    		
		    	},
		    	failure: ''
		    });

/*
			 * 根据告警级别，获取该级别的配置信息
			 */
			function getLevelConfigObj(level_){
				if(levelArry == null){
		    		alert('告警配置数据为空');
		    		return null;
		    	}
				var array = levelArry.wlInfo;
		    	for(index in array){
		    		if(array[index].warnLevel == level_){
		    			return array[index];
		    		}
		    	}
		    	return null;
			}

/*
			 * 计算给定的时间比当前相差的天数;这是一个辅助函数 用于计算相差天数
			 */
			function getOverdueDays(oldDate){
				var _dt = new Date();
				var dt = Date.parseDate(oldDate.substr(0,10), "Y-m-d" );
				return _dt.getDayOfYear() - dt.getDayOfYear();
			}
//为GridPanel加载颜色，reporteventrid就是一个GridPanel，定义部分的代码就不贴，普通的grid
		reporteventrid.getStore().on('load',function(s,records){
			        var girdcount=0;
			        s.each(function(r){
			        	var levels = r.get('severity');
			        	var _time  = r.get('firstTime');//逾期时间
			        	var obj = getWarnRowStyleConfig(levels );
			        	
			        	if(obj!= undefined && obj != null){
			        		var _trtt= reporteventrid.getView().getRow(girdcount);
			        		if(obj.timeoutDays < getOverdueDays(_time)){
			        			//_trtt.style.backgroundColor = obj.timeoutColor;
			        			_trtt.style.color ="#ff0000";//obj.levelFontColor;
			        			//_trtt.style.fontSize = 18+'pt';
			        		}else{
			        			
			        			_trtt.style.color ="#ffffff";//obj.levelFontColor;
			        			//_trtt.style.fontSize = 18+'pt';
			        			//_trtt.style.backgroundColor = obj.levelBgColor;
			        		}
			        		alert('backgroundColor:'+_trtt.style.backgroundColor+' fontStyle: '+_trtt.style.color);
			        		
			        		
			        	}
			            girdcount=girdcount+1;
			        });
			    });

重点是这两句：

_trtt.style.backgroundColor = obj.timeoutColor;
_trtt.style.color ="#ff0000";//obj.levelFontColor;

_trtt 是一个html的tr元素（ext返回时这么说的：指定一个行索引，返回该行的<TR> HtmlElement）；上面背景色设置好使，能起作用；但是第二局color字体颜色的设置 无能怎么整都不行，就此卡住了。 注意：俺的浏览器是IE8，FF3.5
上面这种渲染grid是通过循环grid的store数据行来实现的，另有一个弊端不得不说：点击列排序，颜色都没了。。。。

回到原点的解决方案：

ext grid标准的渲染方式是这样的:
css静态文件：

.mystyletest table{background: #ff0000;color: #FFFFFF;}

new Ext.grid.GridPanel({
viewConfig : {
								forceFit : true,
								getRowClass : function(record, rowIndex,rowParams, store) {
         return :'mystyletest'; //style className
}}
.......

一开始我就否决了这种实现方式，很明显，这里的style都是预定义写死在css文件里面的，现在是从后台读取的 #FFFFFF，而js无法IO操作css去修改里面的颜色值吧？
通过Google的帮助，原来可以动态创建stylesheet，由js来创建stylesheet，这就解决了问题

下面这个就是初始化stylesheet的完整代码，渲染grid的时候自己获取className就很简单了
IE8,FF3.5测试通过

//获取级别配置信息
			var levelArry = null;
			/*
			 * 通过数据库数据 初始化Style
			 */
			function initWarnRowStyle(){
		    	if(levelArry == null){
		    		alert('告警配置数据为空');
		    		return;
		    	}
		    	var styleFF = new Array();//FF兼容样式存储下来先
		    	var winSheet = '';
		    	var FFstyle = '';
		    	if(document.all){
		    		winSheet = document.createStyleSheet();
		    	}else{
		    		FFstyle = document.createElement('style');
		    		FFstyle.type = 'text/css';
		    	}
		    	
		    	var array = levelArry.wlInfo;
		    	for(index in array){
		    		var aConfig = array[index]; //一条配置信息对象
		    		var levelClassName = '.warn_'+aConfig.warnLevel;
		    		if(aConfig.warnLevel != ''){
			    			if(document.all){
			    				if(winSheet == '') alert("严重错误请处理");
								winSheet.addRule(levelClassName+' table','background:'+aConfig.levelBgColor+';color:'+aConfig.levelFontColor+';'); 
								winSheet.addRule(levelClassName+'_timeout table','background:'+aConfig.timeoutColor+';color:'+aConfig.levelFontColor+';'); 
						    }else{
						    	styleFF.push(levelClassName+" table{background:"+aConfig.levelBgColor+";color:"+aConfig.levelFontColor+";}");
						    	styleFF.push(levelClassName+'_timeout table{background: '+aConfig.timeoutColor+';color: '+aConfig.levelFontColor+';}');
							}
		    			
		    		}  
		    		
		    	}
		    	if(styleFF.length > 0){
		    		FFstyle.innerHTML=styleFF.join("  ");
		    		document.getElementsByTagName('HEAD').item(0).appendChild(FFstyle);
		    	}
		    }
			//获取配置数据
		    Ext.Ajax.request({
		    	url:'warnlevel.do?method=queryWarnlevelssIsOpen&temp='+new Date(),
		    	success: function(response,options){
		    		levelArry = (Ext.decode(response.responseText));
		    		initWarnRowStyle();//初始化告警StyleSheet
		    	},
		    	failure: ''
		    });