使用javascript控制css与Mozilla&；但Chrome不支持IE

我在使用Internet Explorer应用css（使用文本变量）时遇到了问题，但它在Firefox和Chrome中也可以使用

通过使用DOM方法创建元素来添加新的样式表和脚本，这在跨浏览器中一直是个棘手的问题。这在IE或WebKit中不起作用

style.rel = 'stylesheet';
style.href = 'FireFox.css';

HTMLStyleElement上没有这样的属性<代码>包含内联代码。对于外部样式表，请使用

。幸运的是，这确实有效：

var link= document.createElement('link');
link.rel= 'stylesheet';
link.href= 'something.css';
head.appendChild(link);

但这并没有为您提供从脚本插入规则的方便方法

您还可以使用

document.styleSheets

界面将新规则添加到现有样式表中（例如

中的空

样式）。不幸的是，IE的接口与此处的标准不太匹配，因此您需要代码分支：

var style= document.styleSheets[0];
if ('insertRule' in style)
    style.insertRule('p { margin: 0; }', 0);
else if ('addRule' in style)
    style.addRule('p', 'margin: 0', 0);

这已经在所有主要浏览器（Chrome/Safari/FF/Opera/IE）上进行了测试，包括IE6,7+8：

function createCSS(css, doc) {
    doc = doc || document;
    var style = doc.createElement("style");
    style.type = "text/css";

    if (!window.opera && 'styleSheet' in style && 'cssText' in style.styleSheet) {
        // Internet Explorer 6-8 don't support adding text nodes to 
        // styles, so use the proprietary `styleSheet.cssText` instead
        style.styleSheet.cssText = css;
    }
    else {
        // Otherwise use the standard method
        style.appendChild(doc.createTextNode(css));
    }

    // Note the `|| document.body` as getting the
    // head doesn't always work on e.g. Safari 1.0
    var head = doc.getElementsByTagName("head")[0] || doc.body;

    // Add the new style of higher priority than the last
    // ones if there's already other elements in the head
    if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
    }
    else {
        head.appendChild(style);
    }
}

在编写代码时，它是相对于所提供的文档的，因此可能需要修改以使其相对于另一个路径，或者您可以在CSS中使用绝对图像路径

编辑：删除了所有
innerHTML
引用，以便在可能的情况下使用更标准的
createTextNode
，并清理了各种内容。
我知道这是一个旧线程，但我正在寻找一种解决方案来动态插入CSS样式，以适用于所有常见/主要浏览器。我想与您分享我的解决方案。david的解决方案不起作用（对不起）。我制作了一个工具提示javascript/jQuery类，它可以使用内联样式，但也可以使用CSS样式。（offtopic：该类还可以像默认工具提示一样自动对齐工具提示）

也许你想知道当你像上面的例子那样插入CSS时有什么好处。好的，你不需要一个带有样式的额外CSS文件，你可以从脚本中动态添加样式，当你处理图像时，你可以根据需要动态更改图像的路径（因此你不需要更改任何文件）。您还可以在其他样式表/样式规则上方插入样式，并且可以在下面的其他样式表中修改应用的样式规则（当您使用内联样式或将插入的规则放置在任何现有样式表下方时，这是不可能的）

此功能适用于Opera/Firefox/IE7/IE8/IE9/Chrome/Safari（无任何黑客攻击！）：

确定时返回true，失败时返回false。例如：

var sCss = '#tooltip {background:"#FF0000";}';

// get first stylesheet with jQuery, we don't use $('head') because it not always working
// If there is no stylesheet available, it will be added at the end of the head tag.
var oHead = $(document.getElementsByTagName('head')[0]),
    oFirst = oHead.find('[rel=stylesheet]').get(0);

if( addHtmlStyles( sCss, oFirst ))
 { alert( 'OK' ); }
else { alert( 'NOT OK' ); }

就这些。希望你喜欢这个解决方案。
格里茨，
Erwin Haantjes
@GlassGost:Word不适用于您，因为我在多个浏览器（也在移动浏览器上）中测试了它。在DOM就绪时添加css可能会有所帮助：

$(document).ready( function()
{
  .......
});

有时，更改加载脚本的顺序也会有所帮助

格里茨，
Erwin Haantjes
这对我来说适用于所有当前浏览器中的任何类型的文档（我假设您必须处理多个文档，否则就不会有
Doc
参数）：

如果要改用CSSOM，请执行以下操作：

function add_css_style(css_rules, document) {
    document = document || self.document;
    var stylesheet = document.documentElement.appendChild(
        this.createElementNS("http://www.w3.org/1999/xhtml", "style")
    ).sheet;
    stylesheet.insertRule("@media all{" + rules + "}", 0);
}

你为什么要这样添加css？@Ken well服务器上的每个文件请求都比单独的文件更麻烦。我很高兴这是一个有趣的问题；否则，我会倾向于为了“另外，我很无聊”而投票支持它：-为什么不使用jQuery或其他保证跨浏览器的js库？这看起来是一个非常合理的答案；并不是说其他答案没有那么糟糕。在我选择它作为接受答案之前，首先要做一些测试。非常感谢，如果它真的有用的话。不需要
delete\u CSS
。它不会导致错误，但不会执行任何操作，因为只能删除对象的属性。应使用span替换div以避免创建新行。如果head不存在，只需执行head=body即可。它可以正常工作。@xavierm02:IE6给出了一个
类型不匹配的错误，如果
标记前没有空格。最后一个空格似乎不需要，所以我删除了它。我无法使它与所查看的答案一起工作，但是我通过将我的原始代码和您的代码合并到一个新函数中，使它工作了一半，肯定是在firefox中工作的，而且大部分是在chrome中工作的。奇怪的是，它现在根本不在chrome中工作，可能是它自己更新了或者什么的。嗯，当我测试它的时候；它不适用于Chrome或Internet explorer。此外，我还向提供的代码中添加了头部修正，该代码现在可以处理除IE8之外的所有内容&更早版本，并且比您的代码更简洁。对不起，我忘了投票了。另外，我已经有一段时间没有测试你的代码了，现在它可能正在使用chrome，因为他们正在不断更新。以目前的速度，一半的赏金看起来会给有3张以上选票的人，因为我无法在此页面上获得任何与IE8和更早版本合作的代码。我不回答这个问题，除非IE7（希望是IE6）可以正常工作。你到底测试了什么？我的情况也是如此；作为维基百科风格，我似乎无法访问何时加载脚本或加载脚本的顺序。我在几个浏览器中测试了函数“addHtmlStyles”。我不明白你的问题。维基百科风格？通道Greetz Erwin Haantjes在IE8中不为我工作（IE7，IE6我没有检查，但我不期望任何结果），我说的是当前。IE9是当前的IE。
    function addHtmlStyles( sCss, oBefore ) 
    {
     var oHead = document.getElementsByTagName('head')[0];
     if( !oHead || oHead == null ) 
      { return false; }

     var bResult = false,
         oStyle = document.createElement('style');
     oStyle.type = 'text/css';
     oStyle.rel = 'stylesheet';
     oStyle.media = 'screen';

     if( typeof oStyle.styleSheet == 'object' ) 
      {  // IE route (and opera)
        try{ oStyle.styleSheet.cssText = sCss; bResult = true; }
        catch(e) {}  
      }
     else { 
             // Mozilla route
            try{ oStyle.innerHTML = sCss; bResult = true; }
            catch(e) {};
            if( !bResult )
            {
               // Webkit route
              try{ oStyle.innerText = sCss; bResult = true; }
              catch(e) {};
            }
          }

     if( bResult )
     {
      try 
      {
      if( typeof oBefore == 'object' )
       { oHead.insertBefore(oStyle, oBefore ); }
      else { oHead.appendChild(oStyle); }
      }
      catch(e) { bResult = false; }
     }

 return bResult;
}

var sCss = '#tooltip {background:"#FF0000";}';

// get first stylesheet with jQuery, we don't use $('head') because it not always working
// If there is no stylesheet available, it will be added at the end of the head tag.
var oHead = $(document.getElementsByTagName('head')[0]),
    oFirst = oHead.find('[rel=stylesheet]').get(0);

if( addHtmlStyles( sCss, oFirst ))
 { alert( 'OK' ); }
else { alert( 'NOT OK' ); }

$(document).ready( function()
{
  .......
});

function add_css_style(css_rules, document) {
    document = document || self.document;
    var style = document.createElementNS("http://www.w3.org/1999/xhtml", "style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(css_rules));
    document.documentElement.appendChild(style);
}

function add_css_style(css_rules, document) {
    document = document || self.document;
    var stylesheet = document.documentElement.appendChild(
        this.createElementNS("http://www.w3.org/1999/xhtml", "style")
    ).sheet;
    stylesheet.insertRule("@media all{" + rules + "}", 0);
}