Dynamisches Anwenden von Inline- oder externem CSS mit jQuery
Beim Integrieren von Ajax-Inhalten in eine Seite mithilfe von jQuery ist es notwendig, das angewendete CSS zu verwalten zu diesem Inhalt. In diesem Artikel werden Methoden zum Anwenden von Inline-CSS oder zum dynamischen Laden externer CSS-Stylesheets untersucht, um eine ordnungsgemäße Darstellung des geladenen Inhalts sicherzustellen.
Problem
Laden von Ajax-Inhalten in ein Yahoo-Popup mit Die .get-Methode von jQuery verursacht Probleme bei der Anwendung von dynamisch generiertem CSS. Chrome wertet CSS, das dem DOM inline hinzugefügt wurde, nicht aus, Internet Explorer hingegen schon. Es ist wichtig, eine Möglichkeit zu finden, dynamisch geladenes CSS entweder inline oder extern auszuwerten.
Lösung
jQuery bietet mehrere Methoden zum dynamischen Laden und Auswerten von CSS:
Inline-CSS laden mit AJAX
$.get(myStylesLocation, function(css) {
$('<style type="text/css"></style>')
.html(css)
.appendTo("head");
}); Externes CSS mit einem dynamisch erstellten laden
$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
.appendTo("head");Externes CSS mit einem dynamisch erstellten laden