Блог

Главная - Вопросы по программированию - style.styleSheet.cssText не работает в IE 9

style.styleSheet.cssText не работает в IE 9

#javascript #jquery #internet-explorer

#javascript #jquery #internet-explorer

Вопрос:

Каков наилучший способ, аналогичный приведенной ниже функции,

это работает во всех браузерах и в любой его версии, особенно в IE.

 var head  = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
css = "some style here"
style.type = 'text/css';

if (style.styleSheet){
  #Problem here: This is works for IE8 and below BUT not in higher version.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Комментарии:

1. Я пытаюсь протестировать ваш код в IE 11, режиме документа IE 9, IE 8, IE 10 и 11. Я обнаружил, что ваш код работает только с IE 11. Я проверяю документацию и обнаруживаю, что совместимость свойства cssText неизвестна для IE. Также не поддерживаются более старые версии IE. Поэтому рекомендуется использовать последнюю версию IE, которая является IE 11, может помочь вам избежать этой проблемы. Ссылка: developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration /…

Ответ №1:

Может быть, попробуйте загрузить css непосредственно в заголовок, если нет объекта css.styleSheet.

Не было времени на тестирование, но я думаю, что это должно сработать. Если у вас есть какие-либо вопросы, задавайте. 🙂

 <script type="text/javascript">
function appendStyle(styles) {
  var css = document.createElement('style');
  css.type = 'text/css';

  if (css.styleSheet) css.styleSheet.cssText = styles;
  else css.appendChild(document.createTextNode(styles));

  document.getElementsByTagName("head")[0].appendChild(css);
}

var styles = '#header { color: white }';

window.onload = function() { appendStyle(styles) };
</script>

Комментарии:

1. Привет @Iwolf спасибо за ответ, я проведу некоторое тестирование в разных браузерах и дам вам знать 🙂

2. Это тот же метод, который это style-loader делает. :] github.com/webpack-contrib/style-loader/blob/master/src /…