jQueryで外部CSSファイルを読み込む方法を詳しく解説-jsチュートリアル-php.cn

jQueryで外部CSSファイルを読み込む方法を詳しく解説

伊谢尔伦

リリース： 2017-07-21 09:30:30

オリジナル

1879 人が閲覧しました

ページレイアウトを切り替えるときなど、jQueryを使用して外部CSSファイルをロードする必要がある場合があります。アイデアは、リンク要素を作成し、それをタグに追加することです。まず、それを実現するために jQuery を使用する方法を見てみましょう。

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

ログイン後にコピー

以下の書き方をしている友達もいるかもしれませんが、形式は少し異なりますが（append appendTo）、原則は同じです。

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

ログイン後にコピー

最後に、JavaScript で直接使用したいと考えている友人もいるかもしれません。その方法は次のとおりです:

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

ログイン後にコピー

Web でのやり取り中であれば、上記の方法を使用して CSS ファイルを導入できます。 jQuery または javascript 、それ以外の場合はオリジナルのメソッドを使用することをお勧めします。

以下ではjsとcssを読み込む例も紹介しています

コードは以下の通りです

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

ログイン後にコピー

以上がjQueryで外部CSSファイルを読み込む方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。