$.getScript
jQueryに相当するものはありますが、スタイルシートをロードするためですか?
4 に答える
CSS はスクリプトではないため、スクリプトの実行という意味で「実行」する必要はありません。
基本的<link>
に、その場で作成され、ヘッダーに追加されるタグで十分です。
$('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: 'path_to_the.css'
}).appendTo('head');
また
var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';
jQueryなしでやりたい場合。
ブラウザーは DOM の変更に応答し、それに応じてページ レイアウトを更新します。
編集:
古い Internet Explorer にはこれに問題があると読みましたが、それを機能させるには、答えのようにする必要があるかもしれません:
https://stackoverflow.com/a/2685639/618206
EDIT2:
ファイルの内容を読み取ってインライン (<style>
タグ間) に配置することも有効な解決策ですが、そうすると CSS はブラウザーによってキャッシュされません。
スタイルシートを処理する代替手段を作成しました$.getScript
。明らかな理由から、これを$.getStylesheetと呼びました。
オブジェクトを実装し$.Deferred
ます。つまり、次のように連鎖できます。
$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
console.log('the css and js loaded successfully and are both ready');
}, function () {
console.log('an error occurred somewhere');
});
$.getStylesheetの小さな関数を次に示します。Github gist でホストされているだけなので、必要に応じて更新できます。
$.getScript は実際には別の HTTP リクエストにすぎないため、同じメソッド $.getScript を使用してスタイル シートを「ダウンロード」できます。ただし、css は実行可能ではないため、少し複雑になります。