2010-09-01 75 views
0

Internet Explorer中的CSS修改有点问题。当我在<head>中添加新的CSS样式时,IE不会重新加载注入了新CSS的页面。但是,当我更改元素的CSS属性时,它的工作原理!此代码完美适用于Firefox,所以我不明白为什么它在IE中不起作用。Internet Explorer 8上的DOM Javascript代码:

你有什么想法做这个头部修改工作吗?

if(document.createStyleSheet) { 
    document.createStyleSheet('http://www.xxxx.com/style.css'); 
} else { 
    newnode=document.createElement('link'); 
    newnode.id='newStyle'; 
    newnode.media="all"; 
    newnode.rel="stylesheet"; 
    newnode.type="text/css"; 

    newnode.href='http://www.xxxx.com/style.css'; 
    document.getElementsByTagName('head')[0].readOnly=false; 
    document.getElementsByTagName('head')[0].appendChild(newnode); 
} 

回答

0

你可以通过使用

document.createStyleSheet

。在google doctype wiki这表明你如何使用他们的library添加样式您在IE中:

/** 
* Installs the styles string into the window that contains opt_element. If 
* opt_element is null, the main window is used. 
* @param {String} stylesString The style string to install. 
* @param {Element} opt_element Element who's parent document should have the 
*  styles installed. 
* @return {Element} The style element created. 
*/ 
goog.style.installStyles = function(stylesString, opt_element) { 
    var dh = goog.dom.getDomHelper(opt_element); 
    var styleSheet = null; 

    if (goog.userAgent.IE) { 
     styleSheet = dh.getDocument().createStyleSheet(); 
    } else { 
    var head = dh.$$('head')[0]; 

    // In opera documents are not guaranteed to have a head element, thus we 
    // have to make sure one exists before using it. 
    if (!head) { 
     var body = dh.$$('body')[0]; 
     head = dh.createDom('head'); 
     body.parentNode.insertBefore(head, body); 
    } 
    styleSheet = dh.createDom('style'); 
    dh.appendChild(head, styleSheet); 
    } 

    goog.style.setStyles(styleSheet, stylesString); 
    return styleSheet; 
}; 

/** 
* Sets the content of a style element. The style element can be any valid 
* style element. This element will have its content completely replaced by 
* the new stylesString. 
* @param {Element} element A stylesheet element as returned by installStyles 
* @param {String} stylesString The new content of the stylesheet 
*/ 
goog.style.setStyles = function(element, stylesString) { 
    if (goog.userAgent.IE) { 
    // Adding the selectors individually caused the browser to hang if the 
    // selector was invalid or there were CSS comments. Setting the cssText of 
    // the style node works fine and ignores CSS that IE doesn't understand 
    element.cssText = stylesString; 
    } else { 
    var propToSet = goog.userAgent.SAFARI ? 'innerText' : 'innerHTML'; 
    element[propToSet] = stylesString; 
    } 
}; 
0

Quirksmode.org asserts的createStyleSheet()方法是唯一的IE浏览器,它匹配我的经验。下面的代码在IE 9,但不是FF 4,铬11,或Safari 5

<html> 
    <head> 
     <script type="text/javascript"> 
      if(document.createStyleSheet()) 
      { 
       document.createStyleSheet("external.css"); 
      } 
     </script> 
    </head> 
    <body>  
     <p id="important">This is an important paragraph.</p> 
    </body> 
</html> 

凡external.css包含以下规则:

#important 
{ 
    font-family: Arial; 
} 

而且它同样运作良好,无论我将剧本放在头上,在段前放在体内,或放在段后放在体内。