IE下创建style标签出现未知错误的问题

动态创建一个style标签并设置css内容:

var style = document.createElement('style');
style.type = "text/css";
style.innerHTML = "..css content here..";
document.getElementsByTagName('head')[0].appendChild(style);

上面的代码看起来没有问题,但在IE6/7/8下访问你会发现提示出现未知错误。测试后发现问题出现在style.innerHTML这句上面,换成innerText依然报错。
解决方法是使用IE独有属性styleSheet.cssText,修改后是这样:

var style = document.createElement('style');
style.type = "text/css";
if (style.styleSheet) { //IE
	style.styleSheet.cssText = '/*..css content here..*/';
} else { //w3c
	style.innerHTML = '/*..css content here..*/';
}
document.getElementsByTagName('head')[0].appendChild(style);

5 comments on “IE下创建style标签出现未知错误的问题

  1. 哈哈,这个问题在《js高级程序设计》的第六版有说道。在IE下的创建style便签和script便签,需要注意兼容的问题。
    在IE会把的标签视为特殊的元素,不允许DOM访问他的子节点,如果需要为添加子节点的话,可以通过script元素的text属性来添加:
    script.text = “…..”;
    另外,在safari3.0之前的版本,却不支持script的text属性,如果需要添加子节点的话,还是需要通过文本节点的DOM方法来实现;
    最后,全部兼容的方法如下:
    function addScript(code){
    var script = document.createElemen(“script”);
    script.type = “text/javascript”;
    try{
    script.appendChild(document.creatTextNode(code));
    }catch(ex){
    script.text = code;
    }
    document.body.appendChild(script);
    }

plain 进行回复 取消回复

电子邮件地址不会被公开。 必填项已用 * 标注

*