Explication détaillée de la façon de charger des fichiers CSS externes dans jQuery

Parfois, nous pouvons avoir besoin d'utiliser jQuery pour charger un fichier CSS externe, par exemple lors du changement de mise en page. L'idée est de créer un élément de lien et de l'ajouter à la balise. Voyons d'abord comment utiliser jQuery pour y parvenir.

$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "site.css"
})
.appendTo("head");

Certains amis peuvent utiliser la méthode d'écriture ci-dessous, mais le formulaire est légèrement différent (append appendTo), mais le principe est toujours le même.

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/Content/Site.css"
});

Enfin, certains amis voudront peut-être l'utiliser directement en javascript, la méthode est la suivante :

function addCSS() {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/Content/Site.css';
document.getElementsByTagName("head")[0].appendChild(link);
}

Si c'est lors d'une interaction Web, nous pouvons utiliser la méthode ci-dessus pour introduire un fichier CSS via jQuery ou javascript, sinon il est recommandé d'utiliser la méthode d'origine.

Ce qui suit présente également un exemple de chargement de js et css

Le code est le suivant

$.extend({
includePath: '',
include: function(file) {
var files = typeof file == "string" ? [file]:file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^s|s$/g, "");
var att = name.split(&#39;.&#39;);
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type=&#39;text/css&#39; rel=&#39;stylesheet&#39; " : " language=&#39;javascript&#39; type=&#39;text/javascript&#39; ";
var link = (isCSS ? "href" : "src") + "=&#39;" + $.includePath + name + "&#39;";
if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
}
}
});
//使用方法
$.includePath = &#39;http://hi.xxx/javascript/&#39;; 
$.include([&#39;json2.js&#39;, &#39;jquery.tree.js&#39;, &#39;jquery.tree.css&#39;]);

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!