2010-01-11 2 views
13

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

Я попытался это:

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

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

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

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

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

+0

Я считаю, что CSS данные обрабатываются по-разному из текста/HTML, так что вы не можете надежно использовать JQuery методы редактирования текста. –

ответ

10

Добавление текста в таблицу стилей, которая будет отображаться правильно, нуждается в другом синтаксисе в 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); 
    } 
+0

Отлично работает. jQuery должен абстрагировать это! Какие проблемы с производительностью вы знаете? – David

+0

Я часто использую его с файлом cookie для сохранения пользовательских настроек отображения нагрузка, а иногда и для больших изменений стиля на странице, а не для циклирования элементов и применения отдельных стилей. Он много лет работал в IE, firefox, opera и safari, даже если методы правил таблицы стилей были менее хорошо поддерживаются. – kennebec

+0

David видит мое сообщение для абстрактного плагина jQuery и отмечает об использовании этого метода в IE. –

0

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

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

1

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

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

Смежные вопросы