2

いくつかのレガシー コードを変更していて、JQuery ライブラリをロードして次のことのみを実行する Web ページを見つけました (これはページの<script>タグ内に<body>あります)。

$(document).ready(function(){ 
  //Once the document is ready, run the following code
  $("head").append($("<link rel='stylesheet' href='style-"+myCSS+".css' type='text/css' media='screen' />"));
});

このコードを通常の JavaScript に変換し、JQuery を削除したいと考えています (JQuery の使用に反対しているわけではありません。それを行うためだけに 90+Kb をロードしなければならないという考えには反対です)。

私の考えですが、私はJSの専門家ではありませんが、（ページ内の同じ位置で）使用することです：

headReference.innerHTML = "<link rel='stylesheet' href='style-" + myCSS + ".css' type='text/css' media='screen' />";

より良い解決策はありますか？

どんな助けでも大歓迎です。

4

2 に答える 2

3

同等のプレーンな JavaScript は次のとおりです。

var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.rel = 'stylesheet';
link.type = 'text/css';
link.media = 'screen';
link.href = 'style-'+myCSS+'.css';
head.appendChild(link);

ドキュメントがロードされた後にそれをロードすることが重要な場合 (これはおそらく必要ありません)、このコードをスクリプト タグのタグの末尾の直前に配置できます。<body>それ以外の場合は、<body>要素内の任意の場所に配置できます。

于 2012-09-02T09:01:38.510 に答える
1

jfriend00の答えは問題ありません。元のjQueryに少し近い別のアプローチを次に示します。

var h = document.createElement('head');
h.innerHTML = "<link rel='stylesheet' href='style-" + 
              myCSS + ".css' type='text/css' media='screen'>"
document.getElementsByTagName('head')[0].appendChild(h.firstChild);
于 2012-09-02T10:03:19.557 に答える