Создание динамической встроенной таблицы стилей

Каков наилучший способ создания динамических тегов стиля с помощью js и/или jQuery?

Я пробовал это:

var style= jQuery('<style>').text('.test{}');

Это работает в FF, но появляется ошибка в IE7 "Неожиданный вызов метода или доступа к свойствам".

var style = document.createElement('style');
style.innerHTML='.test{}';

Дает ту же ошибку. Не имеет значения, использую ли я innerHTML или innerText. Странно то, что перед добавлением тега стиля он показывает ошибку.

Я подозреваю, что cssText имеет к этому какое-то отношение, но я не уверен, как это сделать.

Ответ 1

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

   document.addStyle= function(str, hoo, med){
     var el= document.createElement('style');
     el.type= "text/css";
     el.media= med || 'screen';
     if(hoo) el.title= hoo;
     if(el.styleSheet) el.styleSheet.cssText= str;//IE only
     else el.appendChild(document.createTextNode(str));
     return document.getElementsByTagName('head')[0].appendChild(el);
    }

Ответ 2

Этот метод генерации правил css динамически будет ошибочным, даже если он сработает. IE будет просто игнорировать элементы <style> после того, как более 30 были вставлены (см. http://support.microsoft.com/kb/262161).

Вы можете использовать плагин jquery.rule для управления правилами CSS с помощью javascript.

Ответ 3

Я бы посмотрел на Javascript document.styleSheets и метод addRule().

(Отказ от ответственности: я никогда не использовал это сам)