Question

JavaScriptとjQueryを使用して、HTMLページの先頭にCSSを追加する2つの方法があります。

$('head').append("<style type='text/css'> my CSS <\/script>"); 

または

var styleElement = document.createElement('style'); 
    var styleText = 'my CSS'; 
    var headElements = document.getElementsByTagName('head'); 
    styleElement.type = 'text/css'; 
    if (headElements.length == 1) { 
    headElements[0].appendChild(styleElement); 
    } else if (document.head) { 
    document.head.appendChild(styleElement); 
    } 
    if (styleElement.styleSheet) { // IE 
     styleElement.styleSheet.cssText = styleText; 
    } else { // Other browsers 
     var textNode = document.createTextNode(styleText); 
     styleElement.appendChild(textNode); 
    } 

もちろん最初はたくさん短いですが、それはあまり受け入れられていますか？

Answer 1

これは、可読性とパフォーマンスの問題です。

jQueryを使った場合よりも生のJavascriptの方が速いと主張します（そして、通常は正しいでしょう）。なぜそうでないのでしょうか？ jQueryは、素敵な構文と便利さを提供するために、あなたがやっていることから生のJavascript呼び出しを抽象化します。これは、jQueryを使用するときにオーバーヘッドが発生することを意味します。これは、コマンドが生のJavascriptコードに「変換」される部分に到達するまで、コマンドがジグザグして詰まってしまうためです。

しかし、やはり生のJavascriptコードを書くことは、時には（ちょうどすべてのコードを見てください！）だけでなく、ブラウザ間の問題（jQueryが正規化しようとする）の影響を受けやすく、初心者に読むのは難しい。パフォーマンス上のメリットは本当に価値がありますか？

これは、正直なところ、あなたがやろうとしていることの問題です。ここでは、生のJavascriptに行くメリットはごくわずかです。 jQueryでそれを試してみてください。

Answer 2

あなたの最初のオプションは、CSSをヘッドセクションに追加するための許容された方法です。 JQueryを使用すると、ブラウザ間で最も互換性のあるソリューションが提供されます。

Answer 3

acceptedはどういう意味ですか？ jQueryを使用する場合、コードには1行しかありませんが、jQueryフレームワークは2番目の実装のアイデアで述べたのと同じように動作します。すでにjQueryを使用している場合は、jQueryに固執したいと思うかもしれません。しかし、その目的のためだけにフレームワークを使用している場合は、フレームワーク全体を含めないでください。