2013-03-19 9 views
10

Czy istnieje sposób ustawienia CSS klas globalnych za pomocą JavaScript lub jQuery? Oznacza to, że dodajesz .my_class { foo:bar } do tagu strony <style/>?Definiowanie globalnych klas CSS za pomocą JavaScript lub jQuery?

+0

możliwe duplikat [Czy to możliwe, aby zmienić arkusz stylów CSS za pomocą JavaScript? (NIE jest to styl obiektu, ale sam arkusz stylów)] (http://stackoverflow.com/questions/6620393/is-it-possible-to-alter-a-css-stylesheet-using-javascript-not-the -style-of-an) – Quentin

+0

Możliwy duplikat: [jQuery create CSS rule/class @ runtime] (http://stackoverflow.com/questions/1212500/jquery-create-css-rule-class-runtime) – Boaz

+0

Tak, ale ułóż ** duże ostrzeżenie ** w źródle witryny, ostrzegające każdego, kto pracuje w witrynie w przyszłości. W moim doświadczeniu strony z dynamicznie budowanymi/poprawionymi arkuszami stylów są najbardziej zagmatwanymi rzeczami w znanym wszechświecie. –

Odpowiedz

14

Czysta javascript -

var style=document.createElement('style'); 
style.type='text/css'; 
if(style.styleSheet){ 
    style.styleSheet.cssText='your css styles'; 
}else{ 
    style.appendChild(document.createTextNode('your css styles')); 
} 
document.getElementsByTagName('head')[0].appendChild(style); 
+0

Cóż, istnieją dwie prawidłowe odpowiedzi ... wybieranie przez Math.random(). – MaiaVictor

+1

Podczas gdy obie odpowiedzi zapewniają poprawne rozwiązanie dla danego pytania, wolę używać czystego javascript dla celów wydajności, kiedy nie staram się obsługiwać starych wersji IE. – vastlysuperiorman

+1

@vastlysuperiorman Nie należy wspierać żadnej wersji IE. – Leif

13

Tak, można to zrobić w jQuery:

var styleTag = $('<style>.my_class { foo: bar; }</style>') 
$('html > head').append(styleTag); 

Działa poprzez proste dodanie <style> tag na końcu <head>.

+0

Cóż, istnieją dwie prawidłowe odpowiedzi ... wybieranie przez Math.random(). – MaiaVictor

Powiązane problemy