Попытка добавить тег стиля, используя JavaScript (innerHTML в IE8) - PullRequest
Новая
       8

Попытка добавить тег стиля, используя JavaScript (innerHTML в IE8)

9 голосов
/ 12 февраля 2012

Это не работает в IE8.Я думаю, что это innerHTML, который вызывает проблему.Как решить? 

// jQuery plugin
(function( $ ){

    $.fn.someThing = function( options ) {  

        var d = document,
            someThingStyles = d.createElement('style');

        someThingStyles.setAttribute('type', 'text/css');
        someThingStyles.innerHTML = " \
        .some_class {overflow:hidden} \
        .some_class > div {width:100%;height:100%;} \
        ";
        d.getElementsByTagName('head')[0].appendChild(someThingStyles);

        });

    };

})( jQuery );

Ответы [ 3 ]

14 голосов
/ 12 февраля 2012

JQuery

Поскольку вы уже используете jQuery, используйте: 

 $('<style type="text/css">' + 
   '.some_class {overflow:hidden}' +
    '.some_class > div {width:100%;height:100%;}' +
    '</style>').appendTo('head');

Чистый JavaScript

Если вы не хотите использовать jQuery, вы должны сначала добавить элемент <style>, а затем использовать свойство style.styleSheet.cssText (только для IE !!). 

var d = document,
    someThingStyles = d.createElement('style');
d.getElementsByTagName('head')[0].appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');

someThingStyles.styleSheet.cssText = " \
.some_class {overflow:hidden} \
.some_class > div {width:100%;height:100%;} \
";
9 голосов
/ 12 февраля 2012

Если вы не использовали jquery, IE до версии 9 выполняет запись в элемент стиля, назначая строку css для styleelement.styleSheet.cssText.

Другие браузеры (включая IE9 +) позволяет добавлять текстовые узлы непосредственно к элементу. 

function addStyleElement(css){
  var elem=document.createElement('style');
  if(elem.styleSheet && !elem.sheet)elem.styleSheet.cssText=css;
  else elem.appendChild(document.createTextNode(css));
  document.getElementsByTagName('head')[0].appendChild(elem); 
}
1 голос
/ 12 февраля 2012

Вы должны проверить спецификации CSSOM (CSS Object Model) - http://dev.w3.org/csswg/cssom/

Возможно, вас заинтересует свойство cssText CSSRule объектов - http://dev.w3.org/csswg/cssom/#dom-cssrule-csstext

...