JavaScript を使用して複数の CSS スタイルシートを切り替えるにはどうすればよいですか?

このチュートリアルでは、JavaScript を使用して複数の CSS スタイルシートを切り替える方法を学習します。

TutorialsPoint Web サイトのテーマを切り替えると、Web サイト全体の CSS がどのように変更されるのか疑問に思ったことはありますか?これは簡単な答えです。ユーザーがボタンを押すと、白いテーマのスタイルシートを削除して暗いテーマのスタイルシートを追加するなど、Web サイトの CSS スタイルシートが切り替わります。

ここでは、JavaScript を使用して複数の CSS ファイルを切り替える例を示します。

ユーザーは JavaScript を使用して、次の構文に従って複数の CSS ファイルを切り替えることができます。

上記の構文では、それに応じて CSS ファイルを切り替える必要があるため、ユーザーは dark.css ファイルのフル パスを追加して、dark.css のスタイルがアプリケーションに適用されているかどうかを確認する必要があります。

例 1

以下の例では、ヘッダーにスタイル シートへのリンクを追加しました。 href 属性の値としてファイル パスを追加する必要があります。

ユーザーが「テーマの切り替え」ボタンをクリックするたびに、changeStlye() 関数が呼び出されます。 changeStyle() 関数では、ID によって「link」要素にアクセスします。さらに、「href」属性の値が dark.css ファイルのパスと等しいかどうかを確認し、それを「light.css」ファイルのパスに変更します。そうでない場合は、「dark.css」ファイルに移動します。 。

ユーザーは、次のコードをそれぞれのファイルに追加し、[テーマの切り替え] をクリックしてスタイル シートを切り替えることができます。

リーリー

リーリー

リーリー 例 2

以下の例では、4 つの異なるスタイル シートを作成します。さらに、各 CSS ファイルで Web ページにさまざまなスタイルを追加しました。

ユーザーがボタンをクリックするたびに、スタイルシートへのパスを使用して chageSheet() 関数が実行されます。 JavaScriptでは、パラメータで取得したsetAttribute()メソッドを使用してhref属性値を設定します。

ユーザーはさまざまなボタンをクリックして、Web ページのスタイルの変化を観察できます。

リーリー

リーリー

リーリー

リーリー

リーリー ユーザーは、このチュートリアルで複数の CSS ファイルを切り替える方法を学習しました。これは、テーマを切り替える必要がある場合に不可欠な機能です。最初の例では、href 属性にアクセスし、その値を設定します。 2 番目の例では、setAttribute() メソッドを使用して「href」属性の新しい値を設定します。

以上がJavaScript を使用して複数の CSS スタイルシートを切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。