Comment injecter des feuilles de style dans l'en-tête de votre document avec JavaScript ?

Injecter des feuilles de style dans le Head avec JavaScript

Votre incapacité à modifier la section head de votre CMS pose un défi lors de l'ajout de feuilles de style CSS à votre site web. Cependant, une solution existe en utilisant JavaScript pour injecter dynamiquement des feuilles de style dans la page.

Pour y parvenir, vous pouvez créer un script et le placer juste avant le étiqueter. Dans ce script, vous pouvez construire un élément de lien à l'aide de la méthode document.createElement() et définir son type sur « texte/css » et son rapport sur « feuille de style ». Enfin, définissez l'attribut href sur le fichier de feuille de style souhaité.

Voici un exemple utilisant 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}');

Alternativement, si vous préférez jQuery pour la facilité d'utilisation :

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

addCss("{my-url}");

Bien qu'il ait été précédemment suggéré d'ajouter l'élément de lien au corps, cette approche peut entraîner un rendu incorrect de la feuille de style dans certains navigateurs. Par conséquent, il est recommandé d'insérer le lien directement dans l'en-tête du document comme indiqué dans les exemples fournis.

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!