JavaScript は動的に作成された CSS スタイルルールを実装します。-jsチュートリアル-php.cn

現在、Web アプリケーションには多数の JavaScript コードが使用されており、私たちはコードを高速化するためのさまざまなソリューションを常に探しています。

1. イベント監視をより効率的にするために イベント委任 を使用します。 2. 関数デバウンス技術 を使用して、一定期間内に特定のメソッドが呼び出される回数を制限します。 イベント関数の高頻度トリガーを防ぐ方法 (中国語訳) を参照してください。 ) 3. JavaScript ローダー を使用して、本当に必要なリソースなどを読み込みます。

ページをより高速かつ効率的にするもう 1 つの方法は、DOM 要素を常にクエリしてさまざまなスタイルを適用する代わりに、JS を介してスタイル シートに特定のスタイルを動的に追加および削除することです。仕組みは次のとおりです。

スタイルシートを取得

任意のスタイル シートを選択してスタイル ルールを追加できます。特定のスタイル シートがある場合は、HTML ページの タグまたは タグに ID 属性を追加し、DOM 要素の Sheet 属性を通じて CSSStyleSheet オブジェクトを直接取得できます。スタイル シートは、document.styleSheets を通じてトラバースすることもできます:

コードをコピー コードは次のとおりです: // 配列のようなスタイル リストを返します StyleSheetList varsheets = document.styleSheets; /* 戻り値は次のようになります:

スタイルシートリスト { 0: CSSスタイルシート、 1: CSSスタイルシート、 2: CSSスタイルシート、 3: CSSスタイルシート、 4: CSSスタイルシート、 長さ: 5、 項目: 機能 } */

// メディア属性に関係なく、最初のシートを取得します varsheet = document.styleSheets[0];

特に注意が必要なのは、スタイル シートのメディア属性です。スタイル シートを画面上に表示したい場合、印刷スタイル シートに CSS ルールを追加することはできません。 CSSStyleSheet オブジェクトのプロパティ情報を詳しく見ることができます:

コードをコピー コードは次のとおりです: //コンソールは最初のスタイルシートの情報を出力します console.log(document.styleSheets[0]); /* 戻り値:

CSSスタイルシート cssRules: CSSRuleList[オブジェクト] 無効: false href: " http://davidwalsh.name/somesheet.css " メディア: MediaList[オブジェクト] ownerNode: リンク[オブジェクト] ownerRule: null 親スタイルシート: null ルール: CSSRuleList[オブジェクト] タイトル: null 入力:「text/css」 */

// メディアタイプを取得 (メディアタイプ) console.log(document.styleSheets[0].media.mediaText) /* 戻り値は次のようになります: このスタイルシートに適用される「all」または「print」またはその他のメディア */

いずれの場合も、ルールを追加するスタイルシートを取得する方法が必ずあります。

新しいスタイルシートを作成します

多くの場合、これらの動的ルールを保持する新しい 要素を作成することが最善の方法となります。これも非常に簡単です:

コードをコピー コードは次のとおりです: varsheet = (function() { // タグを作成します // メディア (/media query, media query) 属性を追加できます // style.setAttribute("メディア", "画面") // style.setAttribute("メディア", "画面のみと (最大幅 : 1024px)")

// WebKit ハック :(

Style.appendChild(document.createTextNode(""));

// 要素をページに追加します document.head.appendChild(style);

style.sheet を返す;

})();

悲劇的なのは、WebKit を正しく作成するには少しのハッキングが必要であるということですが、注意する必要があるのはこのシートだけです。

ルールの挿入

スタイルシートの insertRule メソッドは、IE の以前のバージョンでは使用できませんでしたが、現在ではこれがルール挿入の標準になっています。 insertRule メソッドでは、スタイル シートと同じ CSS ルール全体を記述する必要があります:

コードをコピー コードは次のとおりです: sheet.insertRule("header { float: left; opacity: 0.8; }", 1); この JavaScript API メソッドは少し粗雑に見えますが、実際には次のように機能します。 2 番目のパラメーターのインデックスは、ルールが挿入される位置 (インデックス) を表します。これは、同じルール/コードを挿入して、後続のルールを有効にするためにも非常に便利です。デフォルトのインデックスは -1 で、コレクション全体の終わりを表します。追加の/遅延制御ルールが必要な場合は、インデックス作成の問題を回避するために、ルールの後に ! important タグを追加することもできます。

ルールの追加 - 非標準の addRule メソッド

CSSStyleSheet オブジェクトには、CSS ルールをスタイル シートに登録できる addRule メソッドがあります。 addRule メソッドは 3 つのパラメーターを受け入れます。最初のパラメーターはセレクター、2 番目のパラメーターは CSS ルール コード、3 番目のパラメーターは 0 から始まる整数のインデックスで、(同じセレクター内の) スタイルの位置を示します。

コードをコピー コードは次のとおりです: Sheet.addRule("#myList li", "浮動小数点: 左; 背景: 赤 !重要;", 1); addRule メソッドの戻り値は常に -1 であるため、この値には実際的な意味はありません。 このアプローチの利点は、ページから追加された要素に自動的にスタイルが適用されることです。つまり、要素を特定の要素に追加する必要がなく、ページに直接挿入できることを意味します。もちろんそのほうが効率的です!

安全なアプリケーションのルール

すべてのブラウザが insertRule メソッドをサポートしているわけではないため、ルールの適用を処理するラッパー関数を作成することが最善です。ここでは簡単なハックを紹介します:

コードをコピー コードは次のとおりです: function addCSSRule(シート、セレクター、ルール、インデックス) { If(シート内の「挿入ルール」) { sheet.insertRule(セレクター "{" ルール "}", インデックス); } else if(シート内の「addRule」) { Sheet.addRule(セレクター, ルール, インデックス); } } //使い方 addCSSRule(document.styleSheets[0], "header", "float: left");

このツールのメソッドは、新しいスタイル ルールが追加されるすべての状況をカバーする必要があります。アプリケーション内のエラーが心配な場合は、メソッドのコードを try{} catch(e){} ブロックでラップする必要があります。

メディアクエリルールを挿入

メディア クエリ ルールを追加するには 2 つの方法があります。 1 つ目は、標準の insertRule メソッドを使用する方法です:

コードをコピー コードは次のとおりです: sheet.insertRule( "@media のみ画面と (max-width : 1140px) { header { display: none; } }" ); もちろん、古いバージョンの IE は insertRule をサポートしていないため、もう 1 つの方法は、STYLE 要素を作成し、適切なメディア属性を指定して、そのスタイルを新しいスタイル シートに追加することです。これには複数の STYLE 要素の使用が必要になる場合がありますが、簡単です。オブジェクトを作成し、メディア クエリとインデックスを指定して、その方法で作成/取得するかもしれません。

スタイル シートにルールを動的に追加するのは効率的な方法であり、思ったよりも簡単かもしれません。コードと要素の処理の両方の点で落とし穴に陥るのを防ぐため、次の大きなアプリではこのアプローチを念頭に置いてください。

JavaScript は動的に作成された CSS スタイル ルールを実装します。

JavaScript は動的に作成された CSS スタイルルールを実装します。