JavaScript を使用して新しいスタイル シートと新しいスタイル ルールを作成する、JavaScript スタイル シート

JavaScript を使用して新しいスタイル シートと新しいスタイル ルールを作成する、JavaScript スタイル シート

今日の時代では、Web ページで JavaScript を多用することが一般的であり、それらを最適化して作成するためのさまざまな方法を見つける必要があります。そちらのほうが早いです。イベント委任を使用してイベント リスナーの効率を高め、頻度削減テクノロジーを使用して特定のメソッドの使用回数を制限し、さまざまな JavaScript ローダーを使用して必要なリソースを動的にロードします。ページをより効率的かつ機敏にするもう 1 つの方法は、DOM 要素をクエリしたり、各要素にスタイルを調整したりすることなく、スタイル シート内のスタイルを動的に追加または削除することです。このテクニックの使い方を見てみましょう！

キャプチャスタイルシート

ページでは複数のスタイル ファイルを参照している場合があります。そのうちの 1 つを選択できます。指定すると、HTML ページの LINK タグと STYLE タグに ID を追加して区別し、document.styleSheets オブジェクトに格納されている CSSStyleSheet オブジェクトを取得できます。

注意すべき重要な点は、スタイルシートのメディア属性です。注意しないと、画面表示に使用されるスタイルシートを変更するときに、使用するスタイルシートを誤って印刷用に変更してしまう可能性があります。 CSSStyleSheet オブジェクトにはさまざまな属性情報があり、必要に応じて取得できます。

スタイル シートをキャプチャして、そこに新しいスタイル ルールを追加する方法はたくさんあります。

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

ほとんどの場合、最善の方法は、新しい STYLE 要素を作成し、それに動的にルールを追加することです。とてもシンプルです:

残念ながら、WebKit タイプのブラウザでは、上記のコードを正しく実行するには若干の変更を加える必要がありますが、何があろうとも、必要なシートを取得できます。

スタイルルールの追加 – 標準のaddRuleメソッド

CSSStyleSheet オブジェクトには addRule メソッドがあり、セレクター、スタイル ルールの CSS コード、整数の 3 つのパラメーターを受け入れることができます。この整数は、スタイル シートの位置 (同じセレクターを基準としたもの) を示すために使用されます。 ):

sheet.addRule("#myList li", "フロート: 左; 背景: 赤 !重要;", 1);
位置のデフォルト値は -1 で、これは最後に配置されることを意味します。追加の制御または遅延書き込みの場合は、ルールに ! important を追加して、位置の問題を排除できます。 addRule を呼び出すと -1 が返されますが、これには何も意味がありません。

このテクノロジーの利点は、ページにスタイル ルールを動的に追加して適用できることです。各要素を操作する必要がなく、ブラウザーがこれらのルールを自動的に適用します。効率的にしましょう！

新しいスタイルのルール

CSSStyleSheet オブジェクトには insertRule メソッドもありますが、このメソッドは初期の IE では使用できませんでした。 insertRule メソッドは、addRule メソッドの最初の 2 つのパラメーターを組み合わせます。

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
この方法は見苦しく見えますが、間違いなく非常に便利です。

スタイルルールを安全に適用する

すべてのブラウザが insertRule をサポートしているわけではないため、コードを効果的に実行できるようにカプセル化を行うことが最善です。非常に簡単な梱包方法をご紹介します:

この方法はさまざまな状況に対処できます。このメソッドのコードを個別に使用する場合は、try{}catch(e){} でコードをラップするのが最善です。

メディアクエリのスタイルルールを追加

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

sheet.insertRule("@media のみ画面と (最大幅 : 1140px) { ヘッダー { 表示: なし; } }");
古い IE は insertRule をサポートしていないため、別の方法を使用できます。つまり、STYLE 要素を作成し、それに正しいメディア属性を与え、それに新しいスタイル ルールを追加します。この方法では STYLE 要素が追加されますが、非常に簡単です。

スタイル ルールをスタイル シートに動的に追加することは、非常に効率的でシンプルなテクノロジだと思います。次のアプリでこのテクニックを忘れずに試してみてください。かなりの労力を節約できます。

(英語: JavaScript を使用してスタイルシートにルールを追加します。)

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、皆様もBangke Homeを応援していただければ幸いです。