Wie kann ich Inline- oder externes CSS mit jQuery dynamisch laden?

Anwenden von Inline- oder externem CSS, das dynamisch mit jQuery geladen wird

Beim Laden von HTML-Inhalten über AJAX mit jQuery kann es erforderlich sein, bestimmtes CSS einzubinden Stile für eine korrekte Darstellung. Dynamisch hinzugefügtes CSS wird jedoch zum Zeitpunkt des Einfügens möglicherweise nicht vom Browser ausgewertet.

Optionen für die dynamische CSS-Injektion

Es gibt mehrere Ansätze, CSS dynamisch einzuschleusen das DOM:

Inline StyleSheet

Erstellen Sie dynamisch ein Element und hängen Sie es an das -Element an. Abschnitt:

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');

Externes StyleSheet

Verwenden Sie die $.get()-Methode von jQuery, um eine externe CSS-Datei zu laden:

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

Dynamisch erstellen Tag

Erstellen Sie einen Element dynamisch und hängen Sie es an den Abschnitt:

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

Dynamisch erstellen