Управление CSS с помощью JavaScript работает с Mozilla & Chrome, но не с IE - PullRequest
Новая
       3

Управление CSS с помощью JavaScript работает с Mozilla & Chrome, но не с IE

6 голосов
/ 26 апреля 2010

У меня проблемы с этой функцией, использующей CSS (с использованием текстовой переменной), работающей с Internet Explorer, но она работает в 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

Ответы [ 5 ]

3 голосов
/ 26 апреля 2010

Это было протестировано для работы во всех основных браузерах (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, когда это возможно, и убраны различные вещи.

3 голосов
/ 26 апреля 2010 
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);
2 голосов
/ 15 октября 2010

Я знаю, что это старая тема, но я искал решение для динамической вставки стилей CSS, которое работает со всеми распространенными / основными браузерами. Я хочу поделиться своим решением с вами. Решение Дэвида не работает хорошо (извините). Я создал всплывающую подсказку класса javascript / jQuery, которая может работать, например, со встроенными стилями, но также может работать со стилями в стиле CSS. (offtopic: также класс может автоматически выравнивать всплывающие подсказки, как всплывающие подсказки по умолчанию).

Может быть, вам интересно, какие преимущества дает вставка 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;
}

Возвращает истину, когда все в порядке, или ложь в случае неудачи. Например: 

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' ); }

Вот и все. Надеюсь, вам понравится решение. Greetz, Эрвин Хаантес

1 голос
/ 06 января 2011

@ GlassGost: Weird не работает для вас, потому что я тестировал его в нескольких браузерах (в том числе и в мобильных). Может быть, это поможет добавить CSS, когда DOM готов: 

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

Также иногда помогает изменить порядок загрузки скриптов.

Greetz, Эрвин Хаантес

0 голосов
/ 30 апреля 2011

Это прекрасно работает для меня во всех текущих браузерах с любым типом документа (который, как я полагаю, вы должны иметь дело с несколькими документами, иначе у вас не будет параметра Doc): 

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);
}

Если вы хотите использовать 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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...