Comment injecter une feuille de style dans la tête avec JavaScript depuis le corps ?

Injection d'une feuille de style dans Head avec JavaScript dans le corps

L'impossibilité de modifier le fichier La section d'un CMS peut poser un défi lorsqu'il faut ajouter une feuille de style CSS à un site Web. Ce problème peut être résolu en utilisant JavaScript pour injecter la feuille de style directement dans le fichier , même si le script lui-même est ajouté à la fin de la section

Pour y parvenir, un nouveau L'élément est créé dynamiquement à l'aide de JavaScript. Cet élément est configuré avec les attributs appropriés :

• type : "text/css"
• rel : "stylesheet"
• href : L'URL de la feuille de style à être chargé

Une fois créé, le est ajouté à l'élément section en utilisant la méthode appendChild() sur l'objet Document.head.

Exemple :

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

Ce code crée un nouveau avec le href spécifié et l'ajoute à l'élément

Utilisation de jQuery :

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

addCss("{my-url}");

Remarque : Bien qu'il soit techniquement possible d'ajouter le élément à l'élément section, cela n'est pas recommandé car cela viole la spécification HTML. Par conséquent, il est préférable d’ajouter l’élément au section pour la conformité et les futurs problèmes potentiels de compatibilité du navigateur.

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!