向页面添加样式标签

Adding a style tag to a page

本文关键字：样式 标签 添加      更新时间：2023-09-26

我正在尝试使用javascript添加一些样式到页面

var style = document.createElement("style"),
style.innerHTML = ".firstChildTest div:first-child {width: 2px;}";

但是ie6-8抛出错误时，试图使用innerHTML的样式元素。使用

也会得到相同的错误
 style.append(document.createTextNode(".firstChildTest div:first-child {width: 2px;}"));

如何在ie中为style元素注入样式?

看看这里的答案:如何在IE中复制内联样式元素?

function copy_style(style_text) {    
    var tmp_div = document.createElement('div');
    tmp_div.innerHTML = '<p>x</p><style type="text/css">' + style_text + '</style>';
    return tmp_div.getElementsByTagName('style')[0];
}

注意，您需要在tmp_div的innerHTML中使用<p>标记。如果没有它，IE将不接受style元素

#9之前的IE不能使用childNodes向样式(或脚本或选项)元素添加文本，样式应该在html文档的头部。

function addStyle(str){
    var el= document.createElement('style');
    if(el.styleSheet) el.styleSheet.cssText= str;
    else{
        el.appendChild(document.createTextNode(str));
    }
    return document.getElementsByTagName('head')[0].appendChild(el);
}
相关文章：