Comment puis-je ajouter une feuille de style à la section Head avec JavaScript ?

Ajout d'une feuille de style à la section d'en-tête à l'aide de JavaScript dans le corps

Si vous rencontrez un scénario dans lequel vous devez ajouter une feuille de style CSS à l'en-tête d'un site Web mais que vous ne pouvez pas modifier directement le head, vous pouvez utiliser du code JavaScript pour injecter dynamiquement la feuille de style. Malgré la recommandation d'insérer l'élément link dans la section head, la plupart des navigateurs le gèrent bien dans le corps.

Voici comment y parvenir :

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

Pour une approche plus simple avec jQuery :

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

addCss("{my-url}");

Au lieu d'ajouter à la fin du corps, ce qui n'est techniquement pas l'emplacement recommandé pour l'élément de lien, vous pouvez également utiliser JavaScript pour insérer directement dans la section d'en-tête :

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

En utilisant JavaScript, vous pouvez ajouter efficacement des feuilles de style à la section d'en-tête de votre site Web, même si vous n'avez pas d'accès direct pour modifier l'en-tête lui-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!