Maison > interface Web > tutoriel CSS > Comment puis-je ajouter dynamiquement une feuille de style à l'en-tête à l'aide de JavaScript ?

Comment puis-je ajouter dynamiquement une feuille de style à l'en-tête à l'aide de JavaScript ?

Linda Hamilton
Libérer: 2024-11-14 20:44:02
original
954 Les gens l'ont consulté

How Can I Dynamically Append a Stylesheet to the Head Using JavaScript?

Ajouter dynamiquement une feuille de style à l'en-tête à l'aide de JavaScript

Dans certains scénarios, l'accès et la modification de la section d'en-tête d'une page Web peuvent être restreints. Il reste cependant nécessaire d’ajouter des feuilles de style supplémentaires pour améliorer l’apparence visuelle du site. Cela soulève la question : peut-on utiliser JavaScript pour accomplir cette tâche, en garantissant que la feuille de style est insérée après la balise head ?

Pour relever ce défi, JavaScript propose une solution polyvalente :

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('{myUrl}');
Copier après la connexion

Alternativement, si vous préférez jQuery :

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

addCss("{myUrl}");
Copier après la connexion

Ces méthodes ajoutent dynamiquement l'élément de lien de feuille de style à la section d'en-tête du document HTML, vous permettant d'ajouter des styles supplémentaires à votre site Web même si l'accès à la section d'en-tête est restreint.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal