JavaScript は CSS スタイルシート全体を動的に変更できますか?

JavaScript を使用した CSS スタイルシートの動的変更

JavaScript を使用して、個々の要素のスタイルだけでなく CSS スタイルシートを変更できますか?

解決策

はい、IE9 以降を含む最新のブラウザーでは、JavaScript を使用して CSS スタイルシートを変更できます。この機能は要素のスタイルを変更するだけでなく、スタイルシート自体を変更することもできます。

スタイルシート変更のメソッド

スタイルシートを変更するには、主に 3 つの JavaScript メソッドがあります。 :

• insertRule():新しいルールをスタイルシートに動的に追加します。
• deleteRule(): スタイルシートから既存のルールを削除します。
• cssRules: ルールへのアクセスを提供します以内にstylesheet.

例

プロセスを説明するために、次のコード スニペットを考えてみましょう。

// Get the stylesheet
var stylesheet = document.styleSheets[0];

// Insert a new rule at the end of the stylesheet
stylesheet.insertRule("#my-element { color: red; }", stylesheet.cssRules.length);

// Print the newly added rule
console.log(stylesheet.cssRules[stylesheet.cssRules.length - 1]);

この例では、新しいルールがスタイルシートに追加され、「my-element」クラスの要素の色が赤に設定されます。

以上がJavaScript は CSS スタイルシート全体を動的に変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。