2010-01-11 23 views
13

Jaki jest najlepszy sposób tworzenia dynamicznych tagów stylu za pomocą js i/lub jQuery?Tworzenie dynamicznego wewnętrznego arkusza stylów

Próbowałem w ten sposób: „Nieoczekiwany wywołanie metody lub dostępu do własności”

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

Działa to w FF, ale wyskakuje błąd w IE7

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

Powoduje ten sam błąd. Nie ma znaczenia, czy używam innerHTML lub innerText. Dziwne jest to, że pokazuje błąd przed dodaniem znacznika stylu.

Podejrzewam, że cssText ma coś z tym wspólnego, ale nie jestem pewien jak.

+0

wierzę, że dane css jest traktowany inaczej niż text/html, więc nie można wiarygodnie stosować metody jQuery edycji tekstu. –

Odpowiedz

10

Dodawanie tekstu do arkusza stylów, który będzie renderowany poprawnie, wymaga innej składni w IE niż w innych przeglądarkach. Możesz być w stanie korzystać z niektórych to z 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

Działa świetnie. jQuery powinno to streścić! Jakieś problemy z wydajnością, o których wiesz? – David

+0

Często używam go z ciasteczkiem do utrzymywania aktualnych preferencji wyświetlania użytkownika, a czasami do wprowadzania dużych zmian stylu na stronie zamiast do zapętlenia elementów i zastosowania poszczególnych stylów. Dobrze sprawdziło się przez lata w IE, firefox, operze i safari, nawet gdy metody arkusza stylów były mniej wspierane. – kennebec

+0

David zobaczył mój post na wyodrębnioną wtyczkę jQuery i notatki dotyczące używania tej metody w IE. –

0

Zajrzeję do metody document.styleSheets Javascript i addRule().

(Uwaga: Nigdy nie faktycznie używany ten sam)

1

Ta metoda generowania reguł CSS dynamicznie będą wadami nawet jeśli to działało. IE po prostu zignoruje elementy <style> po wstawieniu więcej niż 30 (zobacz http://support.microsoft.com/kb/262161).

Możesz użyć wtyczki jquery.rule do manipulowania regułami css za pomocą javascript.

Powiązane problemy