純粋な JavaScript でダーク モード機能を作成する

9691 ワード
javascript テキストリンク
私はフロントエンド Framworks を Vue Js および jQuery として使用していましたが、JavaScript の基本で修正しなければならない問題がいくつかあることがわかりました (そして、常に新しいことを修正して学習することを誇りに思っています).フレームワークベースのプロジェクトが必要です.

最初は正しく学習していなかったので、Js のいくつかのプリンシパルを深く学ぶことにしました.ブログ投稿としていくつかの簡単な実装を共有します.

今日のWebサイトで非常に一般的な機能、「ダークモード機能」を作成することから始めましょう.

HTML ページ構造:




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <button><i class="fas fa-sun"></i></button>
    </header>
    <main>
      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>
    </main>
  </body>
</html>


このシンプルな CSS スタイルをページに使用します。




body {
  text-align: center;
}

article {
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding: 10px;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
}

.darking-mode {
  background: #374151;
  color: #fff;
}


クリックと通常モードとダークモードの切り替えを処理する JavaScript 関数について、コードのすべての行を明確に説明しようとします.私は自分のコードにコメントしていたので、すでにコメントされていますが、それについても説明しようとします.

// get the element to be clicked
const buttonToBeClicked = document.querySelector('button');

// addEventListener() method to execute the main function
buttonToBeClicked.addEventListener("click", darkMode);

// our dark mode function
function darkMode() {
  //console.log('Clicked!!');
  let theBody = document.body;
  theBody.classList.toggle('darking-mode');
    //console.log('switched to dark mode!');
  if (document.body.classList.contains('darking-mode')) {
     let icon = document.querySelector('i');
     //console.log(icon);
     icon.classList.remove('fa-sun');
     icon.classList.add('fa-moon');
  } else {
     let icon = document.querySelector('i');
     icon.classList.remove('fa-moon');
     icon.classList.add('fa-sun');
  }
}


機能説明:



addEventListener() メソッドを使用してクリックを処理し、作業を行う関数を実行しました.

その後、「theBody」変数に body 要素をストックしました.

そして、要素の色とボディの背景色の変更を担当するライブ クラス「darking-mode」を返すプロパティ「Element.classList」を使用しました.

最後に、if ステートメントを使用して、fontawesome のトグル アイコンを処理します.

ブログ投稿は、もともと私の個人的なブログに投稿されたものです.それが誰か、どこかで役立つことを願っています.
白俊-3109号(パン屋さん)
appiumでAttributeError:'WebDriver'object has no attribute'contexts'の問題に遭遇