この記事では、JavaScriptのヘッドにリンクタグを動的に作成する方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
多くのフロントエンドの友人がJavaScriptを使用してStyleSheetタグ-Linkタグを動的に作成する必要性に遭遇したと思います。ここでは、ブラウザでリンクタグを動的に作成する方法について説明します。
jQueryでリンクタグを作成します
開発でjqueryを使用する場合は、jqueryを使用してリンクタグを作成する必要があります。
コードコピーは次のとおりです。varcssurl= '/style.css'、
linktag = $（ '<link href = "' + cssurl + '" rel = "styleSheet" type = "text /css"' +（media || "all"） + '"charset ="' + charset || "utf-8" + '" />'）;
//明確に参照してください、リンクタグをヘッドに動的に追加してください
$（$（ 'head'）[0]）。append（linktag）;
ネイティブJavaScriptを使用してリンクタグを作成します
純粋で自然なJavaScriptが好きな場合は、次のように書く必要があります。
コードコピーは次のとおりです。varhead = document.getElementsByTagname（ 'head'）[0]、
cssurl = '/style.css'、
linktag = document.createelement（ 'link'）;
linktag.id = 'dynamic-style';
linktag.href = cssurl;
linktag.setattribute（ 'rel'、 'styleSheet'）;
linktag.setattribute（ 'media'、 'all'）;
linktag.setattribute（ 'type'、 'text/css'）;
head.AppendChild（linktag）;
IEのユニークな方法CreatestyLesheet
IEのユニークな方法も非常に便利です。
コードコピーは次のとおりです。varhead = document.getElementsByTagname（ 'head'）[0]、
cssurl = 'themes/bluenight/style.css'、
// document.createStyleSheetがヘッドにリンクタグを追加しました。それを言う方法、それは非常に便利です
linktag = document.createstyleSheet（cssurl）;
createstyleSheet（[surl] [、iindex]）メソッドは2つのパラメーターを受け入れ、SURLはCSSファイルのURLパスです。 iindexはオプションのパラメーターであり、ページに挿入されたStyleSheetsコレクションのインデックス位置を指します。デフォルトでは、新しく作成されたスタイルが最後に追加されます。
完全な解決策
基本的に、それらのすべてが紹介されています。完全な解決策を見てみましょう。
コードコピーは次のとおりです。関数CreateLink（cssurl、lnkid、charset、media）{
var head = $（$（ 'head'）[0]）、
linktag = null;
if（！cssurl）{
falseを返します。
}
linktag = $（ '<link href = "' + cssurl + '" rel = "styleSheet" type = "text /css"' +（media || "all"） + '"charset ="' + charset || "utf-8" + '" />'）;
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プログラミングに役立つことを願っています。