スタイル ルールを動的に追加する方法についてもう一度話しましょう

私は以前、あるブログ投稿で便利な機能を紹介しましたが、それは私のいくつかのブログ投稿で広く使用されています。最近よく本を読んでいるので、新しく学んだことを整理するためにこのブログ記事を書きました。

性能と構造の分離の原則に基づいて、新しいスタイルシートを直接インポートすることが最善の選択であることに疑いの余地はありませんが、たとえばドラッグ可能な DIV を作成する場合、場合によっては機能しません。スタイルを設定する場合は、元のドキュメントの流れに影響を与えないように絶対に配置し、動きの効果を得るために上と左の値を少しずつ変更します。ドラッグには 1 秒あたり 24 フレームという時間の概念があるため、すべてをスタイル シートに含めることは不可能です。したがって、スタイル ルールを動的に生成し、スタイル ルールを迅速に変更することが非常に必要です。DOM2.0 では、多くのインターフェイスが拡張されました。

一歩下がって説明すると、パフォーマンスと構造の分離はスタイル シートのインポートに限定されません。ご存知のとおり、スタイルには、外部スタイル、内部スタイル、インライン スタイルの 3 種類があります。

• 外部スタイル (上で説明したもの) は、別の CSS ファイルに記述されます。
• 内部スタイルは style タグ内に独立して記述され、通常は head タグ内に配置されます。最後に提供した関数によって生成されたスタイルが内部スタイルです。
• インラインスタイルは、要素の style 属性に記述されるスタイルです。

新しく追加されたインターフェイスは主に外部スタイルに集中しています。私がインターフェイスと言ったのは、IE6 のような傲慢な実装がブラウザによって提供されるからです。

W3C モデルでは、タイプ「text/css」の link タグと style タグは両方とも CSSStyleSheet オブジェクトを表します。document.styleSheets を通じて現在のページ内のすべての CSSStyleSheet オブジェクトを取得できますが、これは単純なものではなくコレクションです。配列。各 CSSStyleSheet オブジェクトには次のプロパティがあります。

• type: 常に「text/css」文字列を返します。
• 無効: 入力が無効になっているのと同じ効果があり、デフォルトは false です。
• href: URL を返します。スタイルタグの場合は null です。
• title: タイトルの値を返します。タイトルは通常の要素のタイトルと同じです。
• media: IE と Firefox が返すものは一貫していないため、何とも言えません。メディアは、そのメディアが所有するスタイル ルールがどのデバイスに対して有効であるかを指定するために使用されます。デフォルトはすべてです。
• ownerRule: スタイルシートが @import で導入されている場合は、読み取り専用の CSSRule オブジェクトを返します。
• cssRules: 読み取り専用のスタイル ルール オブジェクト (CSSStyleRule オブジェクト) のコレクションを返します。

スタイルルールオブジェクト（CSSStyleRuleオブジェクト）は、スタイルをより詳細に設定するためにW3Cによって開発されました。例えば、次のようなものがスタイルルールオブジェクトに相当します。

ボタン[タイプ] {
パディング:4px 10px 4px 7px;
行の高さ:17px;
}

スタイル ルール オブジェクトには、type、cssText、parentStyleSheet、parentRule という主な属性があります。

Type は、スタイル ルールを細分化する、nodeType に似ています。整数を使用して型を表します。具体的な状況は以下の通り

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (CSSStyleRule オブジェクトを定義)
• 2: CSSRule.CHARSET_RULE (CSSCharsetRule オブジェクトを定義します。現在のスタイル シートの文字セットを設定するために使用されます。デフォルトは現在の Web ページと同じです)
• 3: CSSRule.IMPORT_RULE (@import を使用して他のスタイル シートを導入する CSSImportRule オブジェクトを定義します)
• 4: CSSRule.MEDIA_RULE (このスタイルをモニター、プリンター、プロジェクターなどに使用するかどうかを設定するために使用される CSSMediaRule オブジェクトを定義します)
• 5: CSSRule.FONT_FACE_RULE (CSSFontFaceRule オブジェクト、CSS3 の @font-face を定義)
• 6: CSSRule.PAGE_RULE (CSSPageRule オブジェクトを定義)

言うまでもなく、cssText は、cssFloat や styleFloat などの各ブラウザのスタイル属性の違いを無視して、文字列をスタイル ルールに直接変換する非常に便利な属性です。

parentStyleSheet とparentRule はどちらも @import 用です。ただし、@importはIEでは問題があるので基本的には使いません。