Wie fügt man mit JavaScript Stylesheets in den Kopf eines Dokuments ein?

Injizieren von Stylesheets in den Kopf mit JavaScript

Ihre Unfähigkeit, den Kopfbereich Ihres CMS zu ändern, stellt eine Herausforderung dar, wenn Sie Ihrem CMS CSS-Stylesheets hinzufügen Webseite. Es gibt jedoch eine Lösung, indem JavaScript verwendet wird, um Stylesheets dynamisch in die Seite einzufügen.

Um dies zu erreichen, können Sie ein Skript erstellen und es direkt vor dem schließenden platzieren. Etikett. In diesem Skript können Sie mit der Methode document.createElement() ein Link-Element erstellen und dessen Typ auf „text/css“ und rel auf „stylesheet“ festlegen. Legen Sie schließlich das href-Attribut auf die gewünschte Stylesheet-Datei fest.

Hier ist ein Beispiel mit Vanilla-JavaScript:

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

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

  head.appendChild(link);
}

addCss('{my-url}');

Alternativ, wenn Sie jQuery aus Gründen der Benutzerfreundlichkeit bevorzugen:

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

addCss("{my-url}");

Obwohl zuvor vorgeschlagen wurde, das Link-Element an den Text anzuhängen, kann dieser Ansatz in einigen Browsern zu einer falschen Darstellung des Stylesheets führen. Daher empfiehlt es sich, den Link wie in den bereitgestellten Beispielen gezeigt direkt in den Kopf des Dokuments einzufügen.

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