Explication détaillée de la façon de charger des fichiers CSS externes dans jQuery-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-07-21 09:30:30

original

1879 Les gens l'ont consulté

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");

Copier après la connexion

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"
});

Copier après la connexion

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

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

Copier après la connexion

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: &#39;&#39;,
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;]);

Copier après la connexion

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!