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');</style>

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

Verwenden Sie @import innerhalb eines dynamisch erstellten

var myCSS = '@import url("myStyles.css")';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

Unterstützte Browser

Internet Explorer wertet Inline-CSS aus, wenn es dynamisch hinzugefügt wird, Chrome erfordert jedoch die Verwendung von @import, damit externes CSS ausgewertet werden kann. Die Firefox-Unterstützung für dynamische CSS-Injektion kann je nach Version variieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline- oder externes CSS mit jQuery dynamisch laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!