Explication détaillée des exemples d'utilisation pour créer des balises de lien à l'aide de js et jquery

Je crois 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 des balises de lien devrait ressembler à ceci :

var cssURL = '/style.css',
    linkTag = $(&#39;<link href="&#39; + cssURL + &#39;" rel="stylesheet" type="text/css" media="&#39; + (media || "all") + &#39;" charset="&#39;+ charset || "utf-8" +&#39;" />&#39;);
// 请看清楚，是动态将link标签添加到head里   
$($(&#39;head&#39;)[0]).append(linkTag);

Utilisez du JavaScript natif pour créer des balises de lien

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

var head = document.getElementsByTagName('head')[0],
    cssURL = '/style.css',
    linkTag = document.createElement('link');
 
    linkTag.id = 'dynamic-style';
 linkTag.href = cssURL;
 linkTag.setAttribute('rel','stylesheet');
 linkTag.setAttribute('media','all');
 linkTag.setAttribute('type','text/css');
 
head.appendChild(linkTag);

IE La méthode unique createStyleSheet

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

var head = document.getElementsByTagName('head')[0],
    cssURL = 'themes/BlueNight/style.css',
 // document.createStyleSheet 的同时就已经把link标签添加到了head中了，怎么讲呢，倒是挺方便
    linkTag = document.createStyleSheet(cssURL);

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.

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

function createLink(cssURL,lnkId,charset,media){ 
var head = $($('head')[0]),
    linkTag = null;
 
 if(!cssURL){
     return false;
 }
 
 linkTag = $(&#39;<link href="&#39; + cssURL + &#39;" rel="stylesheet" type="text/css" media="&#39; + (media || "all") + &#39;" charset="&#39;+ charset || "utf-8" +&#39;" />&#39;);
  
 head.append(linkTag);
}
function createLink(cssURL,lnkId,charset,media){ 
    var head = document.getElementsByTagName(&#39;head&#39;)[0],
        linkTag = null;
  
 if(!cssURL){
     return false;
 }
    
 linkTag = document.createElement(&#39;link&#39;);
 linkTag.setAttribute(&#39;id&#39;,(lnkId || &#39;dynamic-style&#39;));
 linkTag.setAttribute(&#39;rel&#39;,&#39;stylesheet&#39;);
 linkTag.setAttribute(&#39;charset&#39;,(charset || &#39;utf-8&#39;));
 linkTag.setAttribute(&#39;media&#39;,(media||&#39;all&#39;));
 linkTag.setAttribute(&#39;type&#39;,&#39;text/css&#39;);
    linkTag.href = cssURL; 
 
    head.appendChild(linkTag); 
}

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!