Динамическая загрузка таблицы стилей css не работает в IE

Я динамически загружаю таблицу стилей css (с небольшой помощью от jQuery) следующим образом:

var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
    .attr({ type: 'text/css', href: '../../mz/mz.css', rel: 'stylesheet' })
    .appendTo(head);

Это прекрасно работает в Firefox и Google Chrome, но не в IE.

помочь? Спасибо

6 71
javascript html css jquery internet-explorer-8

6 ответов:

после того, как IE обработал все стили, загруженные со страницы, единственный надежный способ добавить еще одну таблицу стилей-это с document.createStyleSheet(url)

посмотреть статья MSDN на createStyleSheet для более подробной информации.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}
118

вам нужно установить href attr последним и только после того, как элемент ссылки будет добавлен в голову:

$('<link>')
  .appendTo('head')
  .attr({type : 'text/css', rel : 'stylesheet'})
  .attr('href', '/css/your_css_file.css');
38

Это, кажется, работает в IE:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/includes/style.css';
document.getElementsByTagName('head')[0].appendChild(link);
3

Это также может иметь какое - то отношение к нему-взято из статья поддержки Microsoft:

стили на веб-странице отсутствуют или выглядят неправильно при загрузке страницы в версиях Microsoft Internet Explorer ...

...Эта проблема возникает из-за того, что следующие условия в Internet Explorer:

  • все теги стиль после первого 31 стиль теги не являются прикладная.

  • все правила после первые 4095 правил не применяются.

  • на страницы, которые используют правило @import для непрерывный импорт внешнего стиля листы, импортирующие другие таблицы стилей, таблицы стилей, которых больше трех уровней игнорируются.

2

Кажется,

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');

работает также в IE, пока url-адрес является полным URI, включая протокол...

1

открыть ie8 без открытия отладчика. Когда вы доберетесь до точки динамической таблицы стилей... откройте отладчик и вуаля, они должны быть там.

0