动态加入Style标签报运行时异常，为什么？

var headId = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('style');
cssNode.type = "text/css";
cssNode.id = "iAddCss";
headId.appendChild(cssNode);
cssNode.innerText = ".x-form-file-wrap { position: relative; height: 22px; } \n";

 最后一个句报错，不知道为什么，

 但可加入css文件，代码如下：

var headId = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'http://127.0.0.1:8080/ileU/ploadField.css';
headId.appendChild(cssNode);

 

在网上搜了一下,看到别人是样写的,试了一下可以的,贴出代码来

(IE7测试可以,FF3下不行,报错document.createStyleSheet is not a function ):

var cssNode = document.createStyleSheet();
cssNode.addRule(".x-form-file-wrap", "position: relative; height: 22px;");

 

网上还有这样写说是完美解决,呵呵,但本人测试IE6,FF3下可以, IE7下不行,没有效果,但也不报错

function blue(){  
     if(document.all){  
         window.style="body{background-color:blue;";  
         document.createStyleSheet("javascript:style");  
     }else{  
         var style = document.createElement('style');  
         style.type = 'text/css';  
         style.innerHTML="body{ background-color:blue }";  
         document.getElementsByTagName('HEAD').item(0).appendChild(style);  
     }  
}

 

总结一下(IE下通用)：

使用外部css文件,

var headId = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = './metadata/tagruler/css/FileUploadField.css';
headId.appendChild(cssNode);  

 

不用css文件，直接这样写

//var sheet = document.createStyleSheet();  //这样写也可以
var sheet = document.styleSheets[0];  
sheet.addRule(".x-form-file-wrap", "position: relative; height: 22px;", 0);
sheet.addRule(".x-form-file-wrap .x-form-file", "position: absolute; right: 0; "
	+ "-moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; z-index: 2; height: 22px;", 1);
sheet.addRule(".x-form-file-wrap .x-form-file-btn", "position: absolute; right: 0;z-index: 1;", 2);
sheet.addRule(".x-form-file-wrap .x-form-file-text", "position: absolute; left: 0; z-index: 3; color: #777;", 3);

 

 

20091106补充:

Ext动态引用CSS文件:

//插入css样式;
    	Ext.util.CSS.swapStyleSheet("DateTimeField", "datetime.css");

 上面这句相当于:

<link id='DateTimeField' rel="stylesheet" type="text/css" href="datetime.css"></link>

 查看sqapStyleSheet是这声明的:

swapStyleSheet : function(id, url){
       this.removeStyleSheet(id);
       var ss = doc.createElement("link");
       ss.setAttribute("rel", "stylesheet");
       ss.setAttribute("type", "text/css");
       ss.setAttribute("id", id);
       ss.setAttribute("href", url);
       doc.getElementsByTagName("head")[0].appendChild(ss);
   },