Jak načíst soubory CSS pomocí Javascriptu?

Je možné importovat šablony stylů css do html stránky pomocí Javascriptu? Pokud ano, jak to lze provést?

P.S. javascript bude hostován na mém webu, ale chci, aby uživatelé mohli vložit <head> tag jejich webu a měl by být schopen importovat soubor css hostovaný na mém serveru do aktuální webové stránky. (soubor css i soubor javascript budou hostovány na mém serveru).

Odpověď

Zde je způsob „staré školy“, který doufejme funguje ve všech prohlížečích. Teoreticky byste použili setAttribute bohužel jej IE6 nepodporuje konzistentně.

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);
}

Tento příklad zkontroluje, zda již byl CSS přidán, takže jej přidá pouze jednou.

Vložte tento kód do souboru javascriptu, požádejte koncového uživatele, aby jednoduše zahrnul javascript a ujistěte se, že cesta CSS je absolutní, aby byla načtena z vašich serverů.

VanillaJS

Zde je příklad, který používá prostý JavaScript k vložení odkazu CSS do head prvek založený na části názvu souboru adresy URL:

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

var 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>

Vložte kód těsně před koncovku head a CSS bude načteno před vykreslením stránky. Pomocí externího JavaScriptu (.js ) způsobí zobrazení Flash nestylovaného obsahu (FOUC).