Comment créer dynamiquement des balises de lien dans la tête avec des compétences JavaScript_javascript

L'exemple de cet article décrit la méthode de création dynamique de balises de lien dans l'en-tête à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Je pense que de nombreux amis front-end ont rencontré le besoin d'utiliser JavaScript pour créer dynamiquement des balises de feuille de style - des balises de lien. Ici, nous parlerons de la façon de créer dynamiquement des balises de lien dans le navigateur.

Utilisez jQuery pour créer des balises de lien

Si vous aimez utiliser jQuery en développement, alors utiliser jQuery pour créer la balise de lien devrait ressembler à ceci :

Copier le code Le code est le suivant :

var cssURL = '/style.css',
linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "all") '" charset="' charset || "utf -8" '" />');
// Veuillez voir clairement, la balise de lien est ajoutée dynamiquement à l'en-tête
$($('head')(0]).append(linkTag);

Créez des balises de lien à l'aide de JavaScript natif

Si vous aimez le JavaScript pur et naturel, vous devez écrire comme ceci :

Copier le code Le code est le suivant :

var head = document.getElementsByTagName('head')[0],
cssURL = '/style.css',
LinkTag = document.createElement('link');

LinkTag.id = 'style-dynamique';
linkTag.href = cssURL;
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('media','all');
linkTag.setAttribute('type','text/css');

head.appendChild(linkTag);

La méthode unique dans IE createStyleSheet

La méthode createStyleSheet unique à IE est également très pratique.

Copier le code Le code est le suivant :

var head = document.getElementsByTagName('head')[0],
cssURL = 'themes/BlueNight/style.css',
// document.createStyleSheet La balise link a été ajoutée en tête en même temps Comment dire, c'est assez pratique
. LinkTag = document.createStyleSheet(cssURL);

La méthode createStyleSheet([sURL] [, iIndex]) accepte deux paramètres, sURL est le chemin URL du fichier CSS. iIndex est un paramètre facultatif qui fait référence à la position d'index du lien inséré dans la collection de feuilles de style sur la page. La valeur par défaut est d'ajouter le style nouvellement créé à la fin.

Solution complète

En gros, l'introduction est terminée, jetons un œil à la solution complète :

Copier le code Le code est le suivant :

function createLink(cssURL,lnkId,charset,media){
var tête = $($('tête')(0]),
LinkTag = nul;

si(!cssURL){
Renvoie faux ;
>

linkTag = $('<link href="' cssURL '" rel="stylesheet" type="text/css" media="' (media || "all") '" charset="' charset || "utf -8" '" />');

head.append(linkTag);
>
function createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
        linkTag = null;

si(!cssURL){
Renvoie faux ;
>
 
linkTag = document.createElement('link');
linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
linkTag.setAttribute('type','text/css');
LinkTag.href = cssURL;

Head.appendChild(linkTag);
>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.