JavaScript_javascript スキルを使用して head 内にリンク タグを動的に作成する方法

この記事の例では、JavaScriptを使用してhead内にリンクタグを動的に作成する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

フロントエンドの友人の多くは、JavaScript を使用してスタイル シート タグ (リンク タグ) を動的に作成する必要性に遭遇したことがあると思います。ここでは、ブラウザでリンクタグを動的に作成する方法について説明します。

jQuery を使用してリンク タグを作成します

開発で jQuery を使用したい場合は、jQuery を使用してリンク タグを作成すると次のようになります:

コードをコピー コードは次のとおりです:

var cssURL = '/style.css',
linkTag = $('');
// リンク タグが動的に head に追加されることをよく見てください
$($('head')[0]).append(linkTag);

ネイティブ JavaScript を使用してリンク タグを作成する

純粋に自然な JavaScript が好きな場合は、次のように記述する必要があります:

コードをコピー コードは次のとおりです:

var head = document.getElementsByTagName('head')[0],
cssURL = '/style.css',
LinkTag = document.createElement('link');

LinkTag.id = 'ダイナミックスタイル';
linkTag.href = cssURL;
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('メディア','すべて');
linkTag.setAttribute('type','text/css');

head.appendChild(linkTag);

IE独自のメソッドcreateStyleSheet

IE独自のcreateStyleSheetメソッドもとても便利です。

コードをコピー コードは次のとおりです:

var head = document.getElementsByTagName('head')[0],
cssURL = '主題/BlueNight/style.css',
// document.createStyleSheet 同時にheadにリンクタグも追加されています、なんとも便利です
。 LinkTag = document.createStyleSheet(cssURL);

createStyleSheet([sURL] [, iIndex]) メソッドは 2 つのパラメーターを受け入れます。sURL は CSS ファイルの URL パスです。 iIndex はオプションのパラメータで、ページ上のスタイルシート コレクションに挿入されたリンクのインデックス位置を参照します。デフォルトでは、新しく作成されたスタイルが最後に追加されます。

完全な解決策

基本的には導入が終わりました。完全なソリューションを見てみましょう:

コードをコピー コードは次のとおりです。

function createLink(cssURL,lnkId,charset,media){
var head = $($('head')[0]),
LinkTag = null;

if(!cssURL){
false を返します;
}

linkTag = $('');

head.append(linkTag);
}
function createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
linkTag = null;

if(!cssURL){
false を返します;
}

linkTag = document.createElement('link');
linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
linkTag.setAttribute('type','text/css');
LinkTag.href = cssURL

Head.appendChild(linkTag); }

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。