2010-10-12 15 views
43

Załadowałem plik css na serwerze, więc mam adres URL ze mną. Jak mogę załadować go w moim kodzie perl za pomocą JQuery?Jak załadować CSS przy użyciu jquery

Więc obecnie jestem hardcoding css w mojej strony mason którego brakuje na stronie coś takiego

JQ.onReady('show', function(){ 
    JQ.addStyles({styles: ["\n\n.ap_classic { border-top:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #2F2F1D; border-right:1px solid #2F2F1D;background-color:#EFEDD4;padding:3px; } .ap_classic .ap_titlebar { color:#86875D;font-size:12px;padding:0 0 3px 0;line-height:1em; } .ap_classic .ap_close { float:right; } .ap_classic .ap_content { clear:both;background-color:white;border:1px solid #ACA976;padding:8px;font-size:11px; } "]}); 
}); 

chcę uniknąć hardcoding ten css?

+1

Dlaczego to musiał być jQuery? Dlaczego nie po prostu wypisać 'link rel =' do głowy? –

+0

Nie wiesz, co masz na myśli, ładując go do kodu perl, czy chcesz zmodyfikować plik? A może po prostu wyświetlasz go na stronie? Jeśli jest to drugie, spróbowałbym załadować go z perl/html. – Marko

+3

możliwy duplikat [Wczytaj zewnętrzne arkusze stylów na żądanie?] (Http://stackoverflow.com/questions/2126238/load-external-stylesheets-on-request) –

Odpowiedz

68

Nie rozumiem, dlaczego nie można po prostu wstawić element <link/> w sekcji <head/>, ale tutaj jest urywek jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url')); 
+0

Mam stronę mason. Więc nie jest to strona html, gdzie mogę ustawić nagłówki. – TopCoder

+0

Próbowałem tego samego ... Ale wersja IE 8 nie ładuje CSS załadowanego tą metodą. – Rohan210

+6

document.createStyleSheet ("style.css"); IE FIX – Rohan210

32

Znowu, jak za Dynamically loading css stylesheet doesn't work on IE.

Musisz ustawić attr href ostatni i dopiero po ogniwo elem jest dołączany do głowy:

$('<link>') 
    .appendTo('head') 
    .attr({ 
     type: 'text/css', 
     rel: 'stylesheet', 
     href: '/css/your_css_file.css' 
    }); 
+2

.appendTo ('head') działa również dla mnie – Sergey

+0

Doh, oczywiście, że tak! Musiałem spać, kiedy to zakodowałem. Wielka poprawka Sergey :) – ekerner

Powiązane problemy