Vanilla Javascript 中带有按钮的暗模式答案

【问题标题】：Dark Mode with button in Vanilla JavascriptVanilla Javascript 中带有按钮的暗模式
【发布时间】：2019-07-21 18:26:32
【问题描述】：

所以基本上，我在使用应该将网站更改为暗模式的按钮时遇到问题。我还有一个夜间模式，根据用户当前位置的日落之后或日出之前使网站变暗，这个夜间模式有效。所以我知道这一定是我的 js 的问题......

我已经尝试过先添加lightMode，然后删除darkMode，但也没有用...

      <button
              type="button"
              class="btn btn-outline-secondary"
              id="buttonChangeMode"
            >
              <i class="far fa-moon"></i>
            </button>

.lightMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: white;
}
.darkMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: rgb(7, 8, 14);
}

function changeMode() {
  let mode = document.getElementById("body");
  if (mode.classList.contains("lightMode")) {
    mode.classList.add("darkMode").remove("lightMode");
  } else if (mode.classList.contains("lightMode")) {
    mode.classList.remove("darkMode").add("lightMode");
  }
}

let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);

在控制台中，出现的错误是：“Uncaught TypeError: Cannot read property 'remove' of undefined 在 HTMLButtonElement.changeMode"

【问题讨论】：

ClassList 的方法不支持链接。但是，有workaround for that。
remove() 是一种方法。你不能在函数 add 上使用 remove 方法。

标签： javascript

【解决方案1】：

.classList 的.toggle() 方法是最简单的方法。如果您使用 id ，则尽可能限制您的代码使用类。详情在demo中注释。

// Pass Event Object
function changeMode(event) {
  // Event.target always points to what user clicked, hovered over, changed etc,
  const clicked = event.target;
  // Reference body.all
  const all = document.querySelector('.all');

  // If the clicked tag has .mode class...
  if (clicked.matches('.mode')) {
    // Toggle .fa-sun, .btn-outline-dark, ,btn-outline-light, and .fa-moon on button.mode
    clicked.classList.toggle('fa-moon');
    clicked.classList.toggle('btn-outline-dark');
    clicked.classList.toggle('fa-sun');
    clicked.classList.toggle('btn-outline-light');
    // Toggle .darkMode and .lightMode on body.all
    all.classList.toggle('darkMode');
    all.classList.toggle('lightMode');
  }
  return false;
}

// Reference button.mode
const mode = document.querySelector(".mode");

// Register button.mode to the click event
mode.addEventListener("click", changeMode);

.lightMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: white;
}

.darkMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: rgb(7, 8, 14);
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body class='all lightMode'>
  <main class='app container'>
    <section class='row'>
      <article class='col-6'>
        <button class="mode btn btn-outline-dark far fa-sun" type="button"></button>
      </article>
      <figure class='col-6'>
        <img src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' style='width:80%'>
      </figure>
    </section>
  </main>
</body>

</html>

【讨论】：

【解决方案2】：

您没有提供 HTML sn-p - 如果您的 HTML <body> 标签没有如下 ID：

<html>
...
    <body id="body">
...

您将收到该错误，因为 let mode = document.getElementById("body"); 语句的结果将是未定义的，因为 getElementById() 函数需要一个 DOM 元素 ID 值的参数。

见https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

【讨论】：

【解决方案3】：

你应该像这样添加/删除类：

<script>
function changeMode() {
  let mode = document.getElementsByTagName("body")[0]; // set a variable for body tag
  if (mode.classList.contains("lightMode")) {
    mode.classList.add("darkMode")
    mode.classList.remove("lightMode");
  } 
  else {
    mode.classList.add("lightMode")
    mode.classList.remove("darkMode");
  }
}

let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);
</script>

您可以阅读更多here

【讨论】：