Wie fügt man ein Stylesheet mit JavaScript aus dem Body in den Kopf ein?

Stylesheet in Head mit JavaScript in Body einfügen

Die Unfähigkeit, den zu bearbeiten Abschnitt eines CMS kann eine Herausforderung darstellen, wenn Sie einer Website ein CSS-Stylesheet hinzufügen müssen. Dieses Problem kann gelöst werden, indem JavaScript verwendet wird, um das Stylesheet direkt in die -Datei einzufügen. Abschnitt, auch wenn das Skript selbst am Ende des -Abschnitts angehängt wird. Tag.

Um dies zu erreichen, wird ein neuer Das Element wird dynamisch mithilfe von JavaScript erstellt. Dieses Element ist mit den entsprechenden Attributen konfiguriert:

• Typ: „text/css“
• rel: „stylesheet“
• href: Die URL des Stylesheets zu geladen werden

Einmal erstellt, wird der Das Element wird an das Element angehängt. Abschnitt unter Verwendung der appendChild()-Methode für das Document.head-Objekt.

Beispiel:

function addCss(fileName) {
  const head = document.head;
  const link = document.createElement("link");

  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = fileName;

  head.appendChild(link);
}

addCss('{my-url}');

Dieser Code erstellt einen neuen Element mit dem angegebenen href und hängt es an den Abschnitt.

Verwendung von jQuery:

function addCss(fileName) {
  $("<link />", {
    rel: "stylesheet",
    type: "text/css",
    href: fileName
  }).appendTo('head');
}

addCss("{my-url}");

Hinweis: Obwohl es technisch möglich ist, den Element zum Abschnitt wird dies nicht empfohlen, da es gegen die HTML-Spezifikation verstößt. Daher ist es vorzuziehen, das Element an anzuhängen. Abschnitt für Compliance und mögliche zukünftige Probleme mit der Browserkompatibilität.

Das obige ist der detaillierte Inhalt vonWie fügt man ein Stylesheet mit JavaScript aus dem Body in den Kopf ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!