[使用javascript控制CSS可以在Mozilla和Chrome中使用，但不能在IE中使用

问题描述 投票：6回答：5

使用Internet Explorer使用CSS（使用文本变量）的此功能存在问题，但在Firefox和Chrome中有效。

the code:

/*! addCssStyle() applies the text value $CssText$ to the the specified document
$Doc$ e.g. an IFrame; or if none specified, default to the current document,
*/function addCssStyle(CssText, Doc){

//Secure $Head$ for the current $Doc$
    Doc = Doc||document;    var head = Doc.getElementsByTagName('head')[0];
    if(!head || head == null){
        head = Doc.createElement('div');    Doc.body.appendChild(head);
    } if(!head || head == null){return false;}

//createElement('style')
    var PendingStyle = Doc.createElement('style');
//  if (is_gecko){PendingStyle.href = 'FireFox.css';}//???needeed???
    PendingStyle.type = 'text/css';
    PendingStyle.rel = 'stylesheet';
//  PendingStyle.media = 'screen';//???needeed???
    PendingStyle.innerHTML = CssText;
    head.appendChild(PendingStyle);

}/*___________________________________________________________________________*/

the use of the function:

var NewSyleText = //The page styling
"h1, h2, h3, h4, h5 {font-family: 'Verdana','Helvetica',sans-serif; font-style: normal; font-weight:normal;}" +
"body, b {background: #fbfbfb; font-style: normal; font-family: 'Cochin','GaramondNo8','Garamond','Big Caslon','Georgia','Times',serif;font-size: 11pt;}" +
"p { margin: 0pt; text-indent:2.5em;  margin-top: 0.3em; }" +
"a {    text-decoration: none; color: Navy; background: none;}" +
"a:visited {    color: #500050;}" +
"a:active { color: #faa700;}" +
"a:hover {  text-decoration: underline;}";
addCssStyle(NewSyleText);//inserts the page styling
javascript internet-explorer google-chrome webkit
5个回答
3
投票
var style = document.createElement('style');

通过使用DOM方法创建元素来添加新的样式表和脚本，这一直是跨浏览器的主题。在IE或WebKit中将无法使用。

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

HTMLStyleElement上没有此类属性。 <style>包含内联代码。对于外部样式表，请使用<link>。幸运的是，它确实起作用了：

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

但是没有给您方便的方法从脚本中插入规则。

您还可以使用style界面将新规则添加到现有样式表（例如<head>中为空的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);
3
投票

经过测试，可以在包括IE6,7 + 8在内的所有主流浏览器（Chrome / Safari / FF / Opera / IE）上运行：

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中使用绝对图像路径。

EDIT：删除了所有innerHTML引用，以便在可能的情况下使用更标准的createTextNode并清理各种内容。

2
投票

我知道这是一个旧线程，但我一直在寻找一种解决方案，以动态插入CSS样式，以与所有常见/主要浏览器一起使用。我想与您分享我的解决方案。大卫的解决方案不能很好地工作（抱歉）。我制作了一个工具提示javascript / jQuery类，该类可以使用内联样式，但也可以使用CSS样式。 （主题：此外，该类还可以像默认工具提示一样自动对齐工具提示）。

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

此功能可用于Opera / Firefox / IE7 / IE8 / IE9 / Chrome / Safari

（无需应用任何技巧！）：
    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;
}

如果可以则返回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
1
投票

@@ GlassGost：Weird不适用于您，因为我在多种浏览器（也在移动浏览器）中对其进行了测试。也许在DOM准备就绪时添加css会有所帮助：

0
投票

这对我当前使用所有类型的文档的所有浏览器都很好（我认为您必须处理多个文档，否则您将没有Doc参数）：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.