Javascript Jquery Добавить таблицу стилей IE - PullRequest
Новая
       0

Javascript Jquery Добавить таблицу стилей IE

2 голосов
/ 06 октября 2011

Источник моего кода: 

            nodeCss = $('<link rel="stylesheet" href="about:blank" type="text/css" 

media="all" />');
                nodeCss.attr('href',css_file);
                $("head").append(nodeCss);

У меня две проблемы в IE:

  • Первая таблица стилей игнорируется впервые: моя страницаПозвольте мне перезагрузить код, и когда я это сделаю, таблица стилей больше не игнорируется.Возможно, что таблица стилей должна быть загружена перед вставкой новых элементов, на которые нацелен styleSheet.

  • Вторая проблема, поэтому первую можно «взломать» (потому что только в IE), этофон "url (...)" в моей динамической таблице стилей никогда не загружается в файл динамической загрузки CSS с помощью JavaScript.та же самая ширина действия обычной таблицы стилей в HTML приводит к окну.Еще один, это всего лишь IE: Chrome и Firefox отлично справляются с работой.

Извините за мой язык, я немного говорю по-английски, буду понятен.

Спасибомного.

Ответы [ 3 ]

2 голосов
/ 06 октября 2011

Попробуйте использовать document.createStylesheet для браузеров IE.В MSDN есть статья о том, как использовать этот метод.

Потенциальное кросс-браузерное решение: 

(document.createStyleSheet) ? document.createStyleSheet(css_file) : $('<link rel="stylesheet" type="text/css" href="' + css_file + '" />').appendTo('head')
1 голос
/ 06 октября 2011

Я не буду отвечать прямо на ваш вопрос, потому что есть гораздо более надежные и простые способы достижения желаемого эффекта.

Если вы хотите динамически загружать CSS-файл, присоединенный к документу, используя <link> element, просто добавьте его в свою разметку и установите изначально атрибут disabled: <link rel=stylesheet href=style.css disabled>.Все, что вам нужно сделать в JS / DOM, это установить его свойство DOM disabled в false (логическое значение).В jQuery для этого должен использоваться метод prop().

Если ваша переменная css_file может принимать более различные значения в зависимости от какого-либо другого кода, рекомендуемое решение - изменить class из <html> элемент.Затем вы можете легко использовать селекторы, такие как .state1 #selector и .state2 #selector, для выражения различных состояний в документе HTML.

0 голосов
/ 22 мая 2013

Динамическое добавление таблицы стилей с помощью jQuery вызывает много проблем в старых версиях IE. Вот то, что я закончил, используя тот кросс-браузер работ: 

// Prevent Firefox security error
document.getElementsByTagName('head')[0].appendChild(document.createElement('style'));

// Get last style sheet so that the rules we add will take precedence
var sheet = document.styleSheets[document.styleSheets.length-1]; 


// Internet Explorer method
if(sheet.addRule)
{

    // FORMAT:
    // sheet.addRule('selector','rule: xxx');
    // sheet.addRule('selector','rule: xxx');

    sheet.addRule('a:hover','color: yellow');
    sheet.addRule('a:hover','text-decoration: none');

}

// All other browsers
if(sheet.insertRule)
{

    // FORMAT: sheet.insertRule('selector { rule: xxx; rule: xxx; rule: xxx; }');
    sheet.insertRule('a:hover { color: yellow; text-decoration: none; }', sheet.cssRules.length);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...