現在、Webアプリケーションには多くのJavaScriptコードがありますが、私たちは常にそれらをより速くするさまざまなソリューションを探しています。
1.イベントのプロキシを使用して、イベント監視をより効率的にします。
2.関数debuncingテクノロジーを使用して、特定の方法が期間内に呼び出される回数を制限します。参照してください：イベント機能の高周波トリガーを防ぐ方法（中国語翻訳）
3. JavaScriptローダーを使用して、本当に必要なリソースの一部をロードします。
私たちのページをより速く、より効率的にする別の方法があります。つまり、DOM要素を絶えず照会してさまざまなスタイルを適用するのではなく、JSを介してスタイルシートの特定のスタイルを動的に追加および削除することです。これがどのように機能するかです。
StyleSheetを入手してください
スタイルルールを追加するには、任意のスタイルシートを選択できます。明確なスタイルシートがある場合は、HTMLページに<link>または<style>タグにID属性を追加し、このDOM要素のシート属性を介してCSSStylesheetオブジェクトを直接取得できます。 StyleSheetsは、次のように移動することもできます。
コードコピーは次のとおりです。
//配列のような（配列のような）スタイルリストStyleSheetListを返します
var sheets = document.stylesheets;
/*
返品値は以下に似ています。
StyleSheetList
{
0：cssstylesheet、
1：cssstylesheet、
2：cssstylesheet、
3：cssstylesheet、
4：cssstylesheet、
長さ：5、
アイテム：機能
}
*/
//メディア属性を無視して、最初のシートを取得します
var sheet = document.stylesheets [0];
特に注意する必要があるのは、スタイルシートのメディア属性です。画面に表示したい場合は、印刷スタイルシートにCSSルールを追加してはなりません。 cssstylesheetオブジェクトの属性情報を詳しく見ることができます。
コードコピーは次のとおりです。
//コンソールは最初のスタイルシートの情報を出力します
console.log（document.stylesheets [0]）;
/*
返品値：
cssstylesheet
cssrules：cssrulelist [object]
無効：false
href： "http://davidwalsh.name/somesheet.css"
メディア：Medialist [オブジェクト]
ownernode：link [object]
ownerrule：null
ParentStylesheet：null
ルール：CSSRULELIST [オブジェクト]
タイトル：Null
タイプ：「テキスト/CSS」
*/
//メディアタイプを取得（メディアタイプ）
console.log（document.stylesheets [0] .media.mediatext）
/*
返品値は次のとおりです。
このスタイルシートに適用された「すべて」または「印刷」または他のメディア
*/
すべての場合において、ルールを追加するためにStyleSheetを取得する方法は間違いありません。
新しいStyleSheetを作成します
多くの場合、これを行う最良の方法は、これらの動的なルールを保存するための新しい<style>要素を作成することです。これも非常に簡単です：
コードコピーは次のとおりです。
var sheet =（function（）{
// <style>タグを作成します
var style = document.createelement（ "style"）;
//メディア（/メディアクエリ、メディアクエリ）属性を追加できます
// style.setattribute（ "Media"、 "Screen"）
// style.setattribute（ "Media"、 "のみ画面、（最大幅：1024px）"））
// webkitハックの場合:(
style.appendChild（document.createTextNode（ ""））;
//ページに<style>要素を追加します
document.head.appendChild（style）;
return style.sheet;
}）（）;
悲劇は、WebKitを正しく作成するには少しハッキングが必要ですが、このシートについては気にするだけであるということです。
ルールを挿入します
IEの以前のバージョンでは、スタイルシートの挿入方法は利用できませんでしたが、現在はルールインジェクションの標準です。 InserTruleメソッドでは、CSSルール全体を作成する必要があります。これは、スタイルシートと同じです。
コードコピーは次のとおりです。
Sheet.InserTrule（ "Header {float：left; ofacity：0.8;}"、1）;
このJavaScript APIメソッドは少し素朴に見えますが、このように機能します。 2番目のパラメーターインデックスは、ルールに挿入される場所（インデックス）を示します。これも非常に便利であるため、同じルール/コードを挿入できます。これにより、バックルールが有効になります。デフォルトのインデックスは-1で、セット全体の終わりを表します。追加の/怠zyな制御ルールが必要な場合は、インデックス作成の問題を避けるために、特定のルールに重要なタグを追加することもできます。
ルールを追加 - 非標準アドルールメソッド
CSSStylesheetオブジェクトには、CSSルールをスタイルシートに登録できるAddRuleメソッドがあります。 AddRuleメソッドは3つのパラメーターを受け入れます。最初のパラメーターはセレクター、2番目のパラメーターはCSSルールコード、3番目は0から始まる整数インデックスで、スタイルの位置（同じセレクター）を示します。
コードコピーは次のとおりです。
sheet.addrule（ "＃mylist li"、 "float：left; background：red！fality;"、1）;
addRuleメソッドの返品値は常に-1であるため、この値には実用的な意味はありません。
このアプローチの利点は、ページから追加された要素がスタイルを自動的に適用することです。つまり、特定の要素に追加する必要はなく、代わりにページに直接挿入する必要はありません。もちろん、より効率的です！
セキュリティアプリケーションルール
すべてのブラウザがInserTruleメソッドをサポートしているわけではないため、ルールアプリケーションを処理するためにラッパー関数を作成することをお勧めします。これが簡単な方法です：
コードコピーは次のとおりです。
関数addcsSrule（シート、セレクター、ルール、インデックス）{
if（ "insertrule" in sheet）{
Sheet.InserTrule（selector + "{" + rules + "}"、index）;
}
else if（ "addrule" in sheet）{
Sheet.Addrule（Selector、Rules、Index）;
}
}
//使用方法
addcssrule（document.stylesheets [0]、 "header"、 "float：left"）;
このツール方法は、新しいスタイルのルールが追加されているすべてのケースをカバーする必要があります。アプリケーションのエラーが心配な場合は、TRY {} catch（e）{}ブロックでメソッドのコードをラップする必要があります。
メディアクエリルールを挿入します
メディアクエリルールを追加するには、2つの方法があります。 1つ目は、標準の挿入法を使用することです。
コードコピーは次のとおりです。
sheet.insertrule（
「@mediaのみの画面と（max-width：1140px）{header {display：none;}}」
）;
もちろん、IEの古いバージョンはInsertruleをサポートしていないため、別の方法は、スタイル要素を作成し、適切なメディア属性を指定し、新しいStyleSheetにスタイルを追加することです。これには複数のスタイル要素の使用が必要になる場合がありますが、簡単です。オブジェクトを作成し、メディアクエリとインデックスを指定し、そのようなものを作成/取得する場合があります。
StyleSheetsにルールを動的に追加することは効率的な方法であり、思っているよりも簡単かもしれません。このソリューションは、コード処理と要素処理の両方でピットに落ちるのを防ぐことができるため、次の大きなアプリケーションで使用する必要がある場合があることを忘れないでください。