使用JavaScript控制CSS可与Mozilla& Chrome但不是IE [英] controlling css with javascript works with Mozilla & Chrome but not IE

问题描述

我在应用css（使用文本变量）的情况下使用Internet Explorer时遇到问题，但它适用于Firefox& Chrome。

代码：

  / *！ addCssStyle（）将文本值$ CssText $应用于指定文档
 $ Doc $例如一个IFrame;如果没有指定，则默认为当前文档
 * / function addCssStyle（CssText，Doc）{
 
 //对于当前的$ Doc $ 
文件，安全$头$ = Doc || document; var head = Doc.getElementsByTagName（'head'）[0]; 
 if（！head || head == null）{
 head = Doc.createElement（'div'）; Doc.body.appendChild（头）; 
} 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）; 
 $ b $ / * ___________________________________________________________________________ * / 
  

使用函数：

  var NewSyleText = //页面样式
h1，h2，h3，h4，h5 {font-family：'Verdana'，'Helvetica'，sans-serif; font-style：正常; 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）; //插入页面样式
  

解决方案

这已经过测试，适用于所有主流浏览器（Chrome / Safari / FF / Opera / IE），包括IE6,7 + 8：

 函数createCSS（css，doc）{
 doc = doc ||文件; 
 var style = doc.createElement（style）; 
 style.type =text / css; 
 
 if（style.styleSheet中的样式&&&'cssText'中的window.opera&&'styleSheet'）{
 // Internet Explorer 6-8不支持将文本节点添加到
 //样式，因此请使用专有的`styleSheet.cssText`来代替
 style.styleSheet.cssText = css; 
} 
 else {
 //否则使用标准方法
 style.appendChild（doc.createTextNode（css））; 
} 
 
 //注意`|| document.body`获得
 //头并不总是在例如Safari 1.0 
 var head = doc.getElementsByTagName（head）[0] || doc.body; 
 
 //如果头部已有其他元素，则添加比上次
 //优先级更高优先级的新样式
 if（head.firstChild）{
 head.insertBefore（style，head.firstChild）; 
} 
 else {
 head.appendChild（style）; 
 
 
 
 
 
 
 $ b 
在编写代码时，它是相对于因此可能需要修改文档以使其相对于其他路径进行修改，或者您可以在CSS中使用绝对图像路径。 
 
 
 编辑：删除所有 innerHTML 引用，以便在可能的情况下使用更标准的 createTextNode ，并清理各种东西。 / p> 
Im having problems with this function applying css(using a text variable) working with Internet Explorer but it works in 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

解决方案
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);
    }
}
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.

EDIT: 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屋！