Wie lade ich CSS-Dateien mit Javascript hoch?

Wenn Sie jquery verwenden:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

Ich denke, so etwas würde funktionieren:

<script type="text/javascript" src="/js/styles.js"></script>

Diese JS-Datei enthält die folgende Anweisung:

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

Die Adresse von Javascript und CSS muss absolut sein, wenn sie auf Ihre Site verweisen soll.

Viele CSS-Importtechniken werden in diesem "Sag nein zu CSS-Hacks mit Verzweigungstechniken" Artikel behandelt.

Der Artikel "Verwenden von JavaScript zum dynamischen Hinzufügen von Portlet-CSS-Stylesheets" erwähnt jedoch auch die CreateStyleSheet-Möglichkeit (proprietäre Methode für IE):

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

Rufen Sie die folgende Funktion auf, um eine CSS- oder JavaScript-Datei dynamisch zu laden.

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Übergeben Sie den vollständigen Dateipfad mit dem Namen filename als Argument.

Element.insertAdjacentHTML hat eine sehr gute Browserunterstützung und kann ein Stylesheet in einer Zeile hinzufügen.

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");

Ich weiß, das ist ein ziemlich alter Thread, aber hier kommen meine 5 Cent.

Es gibt einen anderen Weg, dies zu tun, abhängig von Ihren Bedürfnissen.

Ich habe einen Fall, in dem ich möchte, dass eine CSS-Datei nur eine Weile aktiv ist. Wie CSS-Switching. Aktivieren Sie das CSS und deaktivieren Sie es nach einem anderen Ereignis.

Anstatt die CSS dynamisch zu laden und dann zu entfernen, können Sie eine Klasse/eine ID vor allen Elementen in der neuen CSS hinzufügen und dann einfach die Klasse/ID des Basisknotens Ihrer CSS ändern (wie Body-Tag).

Sie würden mit dieser Lösung zunächst mehr CSS-Dateien laden, aber Sie haben eine dynamischere Möglichkeit, CSS-Layouts zu wechseln.

Wenn Sie wissen möchten (oder warten), bis der Stil selbst geladen wurde, funktioniert Folgendes:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

In einem modernen Browser können Sie promise so verwenden. Erstellen Sie eine Loader-Funktion mit einem darin enthaltenen Versprechen:

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

Dann möchten Sie natürlich etwas tun, nachdem das CSS geladen wurde. Sie können die Funktion aufrufen, die ausgeführt werden muss, nachdem CSS wie folgt geladen wurde:

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

Nützliche Links, wenn Sie genau wissen möchten, wie es funktioniert:

Offizielle Dokumente zu Versprechungen

Nützlicher Leitfaden für Versprechen

Ein großartiges Intro-Video über Versprechen

Verwenden Sie diesen Code:

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);

Es gibt ein allgemeines JQuery-Plugin, das nach Bedarf CSS- und JS-Dateien synchronisiert und asych lädt. Außerdem wird verfolgt, was bereits geladen wurde :) Siehe: http://code.google.com/p/rloader/

Hier ist ein Weg mit der Elementerstellungsmethode von jQuery (meine Präferenz) und mit dem Rückruf onLoad:

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);

Die YUI-Bibliothek könnte das sein, wonach Sie suchen. Es unterstützt auch das domänenübergreifende Laden.

Wenn Sie jquery verwenden, macht dieses Plugin dasselbe.

Unten ein vollständiger Code, der zum Laden von JS und/oder CSS verwendet wird

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();

Sie können für diese YUI-Bibliothek oder verwenden Sie diese Artikel zu implementieren

var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

Ich benutze Thymeleaf und das funktioniert einwandfrei. Vielen Dank