ホームページ > 記事 > ウェブフロントエンド > jQueryでCSSファイルを動的に読み込む手順を詳しく解説
今回は、jQueryでCSSファイルを動的に読み込む手順について詳しく説明します。jQueryでCSSファイルを動的に読み込む際の注意点について、実際のケースを見てみましょう。
ページレイアウトを切り替えるときなど、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('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = '/Content/Site.css'; document.getElementsByTagName("head")[0].appendChild(link); }
Web インタラクション中であれば、上記の方法を使用して jQuery または JavaScript を介して CSS ファイルを導入できます。元のメソッドを使用することをお勧めします。
それでは、jsとcssを読み込むことができる例も紹介します
コードは次のとおりです
$.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('.'); var ext = att[att.length - 1].toLowerCase(); var isCSS = ext == "css"; var tag = isCSS ? "link" : "script"; var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' "; var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"; if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">"); } } }); //使用方法 $.includePath = 'http://hi.xxx/javascript/'; $.include(['json2.js', 'jquery.tree.js', 'jquery.tree.css']);
完全な例
index.html
<!-- Created by Barrett at RRPowered.com --> <!-- File name index.html --> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax /libs/jquery/1.4.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="default.css"> <title>A simple jQuery image slide</title> <script type="text/javascript"> $(function(){ $(".theme").click(function(){ var theme=$(this).attr("rel"); $("link").attr("href",$(this).attr('rel')); $("head").append("<link>"); }); }); </script> </head> <body> <p class="theme" rel="blue.css">Blue</p> <p class="theme" rel="orange.css">Orange</p> <p class="theme" rel="yellow.css">Yellow</p> <p class="theme" rel="default.css">Default</p> <p class="container"> <p class="menu">Tab1 Tab2 Tab3 Tab4 Tab5</p> <p class="inner"> Lorem ipsum dolor sit amet </p> <p class="footer">copyright yoursite 2011</p> </p> </body> </html> default.css body{ background-color:#ffffff; font-family:"arial"; } .theme{ margin:10px; width:70px; padding:5px; text-align:center; background-color:#BEF781; border:solid #333333 1px; color:#444444; font-weight:bold; cursor:pointer; } .container{ margin-left:auto; margin-right:auto; width:700px; } .inner{ padding:20px; border:solid #333333 1px; } .menu{ background-color:#f2f2f2; padding:10px; font-weight:bold; } .footer{ background-color:#f9f9f9; padding:5px; } blue.css body{ background-color:#2E9AFE; font-family:"arial"; } .theme{ margin:10px; width:70px; padding:5px; text-align:center; background-color:#BEF781; border:solid #333333 1px; color:#444444; font-weight:bold; cursor:pointer; } .container{ margin-left:auto; margin-right:auto; width:700px; } .inner{ padding:20px; border:solid #333333 1px; background-color:#58ACFA; color:#ffffff; } .menu{ background-color:#f2f2f2; padding:10px; font-weight:bold; } .footer{ background-color:#f9f9f9; padding:5px; } yellow.css body{ background-color:#F7FE2E; font-family:"arial"; } .theme{ margin:10px; width:70px; padding:5px; text-align:center; background-color:#BEF781; border:solid #333333 1px; color:#444444; font-weight:bold; cursor:pointer; } .container{ margin-left:auto; margin-right:auto; width:700px; } .inner{ padding:20px; border:solid #333333 1px; background-color:#f6f6f6; } .menu{ background-color:#F2F5A9; padding:10px; font-weight:bold; } .footer{ background-color:#F2F5A9; padding:5px; } orange.css body{ background-color:#FE9A2E; font-family:"arial"; } .theme{ margin:10px; width:70px; padding:5px; text-align:center; background-color:#BEF781; border:solid #333333 1px; color:#444444; font-weight:bold; cursor:pointer; } .container{ margin-left:auto; margin-right:auto; width:700px; } .inner{ padding:20px; background-color:#F7BE81; color:#404040; } .menu{ background-color:#ffffff; padding:10px; font-weight:bold; color:#FFBF26; } .footer{ background-color:#ffffff; padding:5px; color:#FFBF26; }
この事例を読んだ後、あなたは方法をマスターしたと思います記事、もっとエキサイティングな情報を求めてお越しください。 php 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
以上がjQueryでCSSファイルを動的に読み込む手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。