Wie kann ich mit JavaScript ein Stylesheet zum Kopfbereich hinzufügen?

Hinzufügen eines Stylesheets zum Kopfabschnitt mithilfe von JavaScript im Textkörper

Wenn Sie auf ein Szenario stoßen, in dem Sie dem Kopf einer Website ein CSS-Stylesheet hinzufügen müssen Wenn Sie einen Abschnitt erstellen, den Kopf jedoch nicht direkt bearbeiten können, können Sie JavaScript-Code verwenden, um das Stylesheet dynamisch einzufügen. Trotz der Empfehlung, das Link-Element im Kopfbereich einzufügen, handhaben die meisten Browser es gut im Textkörper.

So können Sie dies erreichen:

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}');

Für einen einfacheren Ansatz mit jQuery :

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

addCss("{my-url}");

Anstatt es an das Ende des Körpers anzuhängen, was technisch gesehen nicht die empfohlene Position für das Link-Element ist, können Sie es auch mit JavaScript direkt in den Kopfbereich einfügen:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Durch die Verwendung von JavaScript können Sie Stylesheets effektiv zum Kopfbereich Ihrer Website hinzufügen, auch wenn Sie keinen direkten Zugriff zum Bearbeiten des Kopfbereichs selbst haben.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript ein Stylesheet zum Kopfbereich hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!