使用javascript控制CSS与Mozilla& Chrome，但不适用于IE [英] controlling css with javascript works with Mozilla & Chrome however not with IE

问题描述

我在使用css(使用文本变量)和Internet Explorer一起使用此功能时遇到了问题，但在Firefox& Chrome.

Im having problems with this function applying css(using a text variable) working with Internet Explorer but it works in Firefox & Chrome.

代码:

/*! 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);

}/*___________________________________________________________________________*/

函数的使用:

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

推荐答案

已通过测试，可在包括IE6,7 + 8在内的所有主流浏览器(Chrome/Safari/FF/Opera/IE)上运行:

This has been tested to work on all major browsers (Chrome/Safari/FF/Opera/IE) including 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中使用绝对图像路径.

As that code is written, it is relative to the document being served so may need to be modified to make it relative to another path, or you could use absolute image paths in the CSS.

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

Removed all the innerHTML references in favour of using the more standard createTextNode when possible and cleaned various things up.

这篇关于使用javascript控制CSS与Mozilla& Chrome，但不适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！