Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Inline- oder externes CSS mit jQuery für AJAX-Inhalte dynamisch anwenden?

Wie kann ich Inline- oder externes CSS mit jQuery für AJAX-Inhalte dynamisch anwenden?

Susan Sarandon
Freigeben: 2024-12-09 07:41:05
Original
479 Leute haben es durchsucht

How Can I Dynamically Apply Inline or External CSS with jQuery for AJAX Content?

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");
}); 
Nach dem Login kopieren

Externes CSS mit einem dynamisch erstellten laden

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");
Nach dem Login kopieren

Externes CSS mit einem dynamisch erstellten laden