Nasıl CSS dosyaları, Javascript kullanarak yüklemeyi?

Bir html sayfasında Javascript kullanarak css stil almak mümkün mü? Eğer öyleyse, nasıl yapılabilir?

P. S javascript olacak barındırılan sitemde, ama istiyorum kullanıcılar yapabilmek için koymak <head> etiketi kendi web sitesi, ve olmalıdır almak için bir css dosyası o benim sunucu içinde geçerli web sayfası. (her iki css dosyası ve javascript dosyası benim sunucu üzerinde barındırılan).

CEVAP

23 ŞUBAT 2009, PAZARTESİ

İşte "" umarım çalışır bunu yaparken, tüm tarayıcılar almaktadır. oldschool Teoride setAttribute ne yazık ki IE6 sürekli desteklemiyor kullanırsınız.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

Eğer CSS ekler zaten eklenmişse, bu örnek sadece bir kez denetler.

Javascript bir dosya içine bu kodu koymak, son kullanıcı sadece javascript kodu eklemek ve CSS yolunu sunucularınızdan yüklendiği için mutlak olduğundan emin olun.

VanillaJS

Burada düz JavaScript head öğesi URL dosya adı bölümüne bağlı olarak içine CSS link enjekte etmek için kullanan bir örnek:

<script type="text/javascript">
file = location.pathname.split( "/" ).pop();

link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) )   ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Kod Ekle sadece kapatmadan önce head etiketi ve CSS sayfa oluşturulmadan önce yüklenmiş olacak. Harici bir JavaScript (.js) kullanarak dosya içeriği ve stil uygulanmamış (FOUC) Bir ışık belirir.

Bunu Paylaş: