JavaScript/jQueryを使用してWebサイトのダーク/ライトモードを作成するにはどうすればよいですか?

ダーク モードは、どの Web サイトにとっても非常に重要です。さまざまな興味を持つユーザーが Web サイトにアクセスします。ダークモードが好きな人もいれば、ライトモードが好きな人もいます。

調査によると、約 70% ～ 80% の人がダーク モードを好み、ライト モードを好む人は 20% ～ 30% のみです。したがって、ユーザーがダーク モードとライト モードを切り替えることができるダーク モードを Web サイトに作成する必要があります。

以下では、HTML、CSS、JavaScript を使用して簡単な Web ページを作成します。さらに、JavaScript と CSS を使用してライト モードとダーク モードを実装する方法を学びます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、暗いテーマと明るいテーマを切り替えることができます。

リーリー

上記の構文では、ダーク テーマのクラス名を切り替えメソッドのパラメーターとして渡します。特定の HTML 要素にクラスを追加および削除します。

＃＃＃アルゴリズム＃＃＃

ユーザーは、次のアルゴリズムに従って、暗いテーマと明るいテーマを切り替えることができます。

ステップ 1

- Web ページの HTML コードを記述し、ライト テーマの場合と同様に CSS を適用します。

• ステップ 2
- CSS を使用して、ダーク テーマのスタイルを作成します。

• ステップ 3
- ボタンを作成し、onclick イベントをボタンに追加します。ユーザーがボタンをクリックすると、暗いテーマと明るいテーマが切り替わります。

• ステップ 4
- 暗いテーマと明るいテーマを切り替えるには、要素に特定のクラスを追加または削除します。たとえば、ダーク テーマ用のクラスを作成し、ダーク テーマ用の CSS を作成します。本体にダークテーマクラスを追加すると、Webサイト全体にダークテーマが適用され、削除すると通常のテーマになるはずです。

• 例 1

以下の例では、ユーザーがボタンをクリックすると、changeMode() 関数が呼び出されます。 changeMode() 関数は、テーマに従ってボタンのテキストを変更します。

さらに、document.body を使用して Web ページ全体にアクセスし、JavaScript を使用して Web ページ全体にダークテーマ クラスを追加して、テーマをダーク モードに変更します。

リーリー

例 2

以下の例では、HTML と CSS を使用してトグル ボタンを作成します。トグルスイッチにはチェックボックスを使用しました。したがって、ユーザーがチェックボックスをオンにするたびに、スイッチがオンになります。したがって、チェックボックスがチェックされているかどうかに応じて、ダークテーマのクラスを追加または削除できます。

さらに、JQuery の addClass() メソッドとremoveClass() メソッドを使用して、本体内のクラスを追加および削除しました。

リーリー

JavaScript と JQuery を使用してダーク モードとライト モードを切り替える方法を学びました。 Web ページの CSS を変更し、その CSS をダークテーマに適用する必要があります。 Web ページにクラスを追加または削除することで、CSS をダーク モードに適用できます。

以上がJavaScript/jQueryを使用してWebサイトのダーク/ライトモードを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。