Ausführliche Erklärung zum Laden externer CSS-Dateien in jQuery

Manchmal müssen wir möglicherweise jQuery verwenden, um eine externe CSS-Datei zu laden, beispielsweise beim Wechseln des Seitenlayouts. Die Idee besteht darin, ein Link-Element zu erstellen und es dem Tag hinzuzufügen. Sehen wir uns zunächst an, wie man dies mit jQuery erreicht.

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

Einige Freunde verwenden möglicherweise die unten stehende Schreibmethode, aber die Form ist etwas anders (append appendTo), aber das Prinzip ist immer noch dasselbe.

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

Schließlich möchten einige Freunde es vielleicht direkt in Javascript verwenden. Die Methode ist wie folgt:

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

Wenn es sich um eine Webinteraktion handelt, können wir die obige Methode verwenden, um eine CSS-Datei über jQuery oder Javascript einzuführen. Andernfalls wird empfohlen, die ursprüngliche Methode zu verwenden.

Im Folgenden wird auch ein Beispiel für das Laden von js und css vorgestellt

Der Code lautet wie folgt

$.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;]);

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Laden externer CSS-Dateien in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!