Ausführliche Erklärung zum Laden externer CSS-Dateien in jQuery-js-Tutorial-php.cn

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

伊谢尔伦

Freigeben： 2017-07-21 09:30:30

Original

1879 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!