JavaScript实现深色模式与动态边框样式切换-js教程-PHP中文网

JavaScript实现深色模式与动态边框样式切换

本教程详细介绍了如何使用javascript实现网页的深色模式切换功能，并特别解决了在切换模式时，动态修改特定div元素border-bottom颜色的问题。文章将涵盖html结构、css样式定义以及核心javascript逻辑，包括正确的元素选择方法和样式属性设置，确保用户界面在不同模式下保持视觉一致性，并提供代码示例，同时探讨如何利用localstorage实现用户偏好持久化。

深色模式实现原理与边框样式动态调整

深色模式（Dark Mode）是现代网页设计中一项流行的功能，它通过将界面颜色反转，为用户提供更舒适的夜间浏览体验，并有助于节省OLED屏幕设备的电量。实现深色模式通常涉及切换页面元素的背景色、文字颜色，以及其他UI组件（如边框、阴影）的颜色。本教程将重点讲解如何通过JavaScript控制这些样式变化，并特别关注如何正确地动态修改特定元素的边框颜色。

HTML 结构

首先，我们需要一个触发深色模式切换的按钮，以及一个需要动态改变边框颜色的目标 div 元素。

<button id="toggleBtn">切换深色模式</button>
<div class="veritas">
  此 div 的底部边框颜色应随模式切换而改变
</div>

登录后复制

toggleBtn: 用于触发模式切换的按钮，通过 id 方便 JavaScript 选取。
veritas: 目标 div 元素，通过 class 标识，其底部边框颜色将动态调整。

CSS 样式定义

接下来，定义页面的基础样式以及深色模式下的特定样式。我们将使用一个 dark-mode 类来控制整体页面的颜色主题。

body {
  margin: 0;
  height: 100%;
  transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
  background-color: #FFFFFF; /* 默认浅色模式背景 */
  color: #101010; /* 默认浅色模式文字颜色 */
}

/* 深色模式样式 */
body.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

/* 目标 div 元素的基础样式 */
.veritas {
  width: 90%;
  margin: 20px auto; /* 居中显示 */
  padding: 10px;
  border-bottom: 1px solid #101010; /* 默认浅色模式边框颜色 */
  transition: border-bottom-color 0.3s ease; /* 为边框颜色添加过渡效果 */
}

登录后复制

body 样式定义了默认的浅色背景和文字颜色，并添加了 transition 以使颜色切换更加平滑。
.dark-mode 类定义了深色模式下的背景和文字颜色。当此类添加到 body 元素时，深色模式将被激活。
.veritas 定义了目标 div 的宽度、内边距和默认的底部边框颜色，同样添加了 transition。

JavaScript 核心逻辑

JavaScript 是实现深色模式切换和动态修改边框颜色的核心。我们需要获取相关元素，监听按钮点击事件，并根据当前模式应用不同的样式。

立即学习“Java免费学习笔记（深入）”；

// 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
// 注意：通过类名获取元素，返回的是一个HTMLCollection，需要取第一个元素
var borderDiv = document.getElementsByClassName("veritas")[0];

// 页面加载时，尝试从localStorage恢复用户偏好
document.addEventListener("DOMContentLoaded", function() {
  var savedMode = localStorage.getItem("darkMode");
  if (savedMode === "on") {
    body.classList.add("dark-mode");
    borderDiv.style.borderBottomColor = "#FFFFFF"; // 深色模式下的边框颜色
    toggleBtn.textContent = "切换深色模式 (当前: 深色)";
  } else {
    // 默认或浅色模式
    body.classList.remove("dark-mode");
    borderDiv.style.borderBottomColor = "#101010"; // 浅色模式下的边框颜色
    toggleBtn.textContent = "切换深色模式 (当前: 浅色)";
  }
});


// 监听按钮点击事件
toggleBtn.addEventListener("click", function() {
  var currentBorderColor;

  // 切换body的dark-mode类
  body.classList.toggle("dark-mode");

  // 根据body是否包含dark-mode类来设置样式和按钮文本
  if (body.classList.contains("dark-mode")) {
    currentBorderColor = "#FFFFFF"; // 深色模式下边框为白色
    toggleBtn.textContent = "切换深色模式 (当前: 深色)";
    localStorage.setItem("darkMode", "on"); // 保存偏好到localStorage
  } else {
    currentBorderColor = "#101010"; // 浅色模式下边框为深色
    toggleBtn.textContent = "切换深色模式 (当前: 浅色)";
    localStorage.setItem("darkMode", "off"); // 保存偏好到localStorage
  }

  // 动态修改目标div的底部边框颜色
  // 关键修正：使用 borderBottomColor 属性来单独设置边框颜色
  borderDiv.style.borderBottomColor = currentBorderColor;
});

登录后复制

代码解析与关键修正：

元素获取:
- document.getElementById("toggleBtn") 和 document.getElementsByTagName("body")[0] 用于获取按钮和 body 元素，这与通常的做法一致。
- 关键点：对于 .veritas 元素，原问题中尝试使用 document.getElementById(".veritas")，这是错误的，因为 .veritas 是一个类名而不是 ID。正确的做法是使用 document.getElementsByClassName("veritas")。这个方法会返回一个 HTMLCollection（一个类数组对象），即使页面上只有一个 .veritas 元素，我们也需要通过索引 [0] 来获取实际的 DOM 元素引用。
事件监听:
- toggleBtn.addEventListener("click", ...) 为按钮添加点击事件监听器。
模式切换逻辑:

微撰
AI智能写作平台

207

查看详情
- body.classList.toggle("dark-mode") 是切换 dark-mode 类的简洁方法。如果 body 元素上没有 dark-mode 类，它会添加；如果有，它会移除。
- 通过 body.classList.contains("dark-mode") 判断当前是否处于深色模式。
- 根据当前模式，设置 toggleBtn 的文本内容。
动态修改边框颜色:
- 关键点：原问题中尝试使用 borderBottom.style.borderBottom = borderBottom; 来修改边框颜色。这里的 borderBottom 变量在循环内被赋值为颜色字符串（如"#FFFFFF"），然后又尝试将其作为 DOM 元素来设置 style.borderBottom。这是错误的。
- 正确的做法是：首先，确保 borderDiv 变量正确引用了目标 div 元素。然后，要单独修改边框的颜色，应使用 element.style.borderBottomColor 属性，而不是 element.style.borderBottom（后者通常用于设置边框的宽度、样式和颜色）。
- 因此，修正后的代码为 borderDiv.style.borderBottomColor = currentBorderColor;。
状态持久化 (localStorage):
- 为了在用户刷新页面后仍然保持选择的模式，我们使用 localStorage 来存储用户的偏好。
- 当模式切换时，localStorage.setItem("darkMode", "on") 或 localStorage.setItem("darkMode", "off") 会保存当前模式。
- 在页面加载时（DOMContentLoaded 事件），我们检查 localStorage.getItem("darkMode") 来恢复之前的模式，并相应地设置 body 类和 borderDiv 的边框颜色。

完整示例代码

将上述 HTML、CSS 和 JavaScript 代码组合起来，即可实现完整的深色模式切换和动态边框样式调整功能。

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深色模式与动态边框切换</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <button id="toggleBtn">切换深色模式</button>
    <div class="veritas">
        此 div 的底部边框颜色应随模式切换而改变
    </div>

    <script src="script.js"></script>
</body>
</html>

登录后复制

CSS (style.css)

body {
  margin: 0;
  height: 100vh; /* 使用vh确保body高度充满视口 */
  display: flex; /* 使用flex布局让内容居中 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: #FFFFFF; /* 默认浅色模式背景 */
  color: #101010; /* 默认浅色模式文字颜色 */
}

/* 深色模式样式 */
body.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

/* 按钮样式 */
#toggleBtn {
  padding: 10px 20px;
  margin-bottom: 20px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode #toggleBtn {
    background-color: #333;
    color: #eee;
    border-color: #555;
}


/* 目标 div 元素的基础样式 */
.veritas {
  width: 90%;
  max-width: 400px; /* 限制最大宽度 */
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #101010; /* 默认浅色模式边框颜色 */
  transition: border-bottom-color 0.3s ease; /* 为边框颜色添加过渡效果 */
}

登录后复制

JavaScript (script.js)

// 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderDiv = document.getElementsByClassName("veritas")[0]; // 注意这里使用了[0]来获取第一个元素

// 页面加载时，尝试从localStorage恢复用户偏好
document.addEventListener("DOMContentLoaded", function() {
  var savedMode = localStorage.getItem("darkMode");
  if (savedMode === "on") {
    body.classList.add("dark-mode");
    borderDiv.style.borderBottomColor = "#FFFFFF"; // 深色模式下的边框颜色
    toggleBtn.textContent = "切换深色模式 (当前: 深色)";
  } else {
    // 默认或浅色模式
    body.classList.remove("dark-mode");
    borderDiv.style.borderBottomColor = "#101010"; // 浅色模式下的边框颜色
    toggleBtn.textContent = "切换深色模式 (当前: 浅色)";
  }
});


// 监听按钮点击事件
toggleBtn.addEventListener("click", function() {
  var currentBorderColor;

  // 切换body的dark-mode类
  body.classList.toggle("dark-mode");

  // 根据body是否包含dark-mode类来设置样式和按钮文本
  if (body.classList.contains("dark-mode")) {
    currentBorderColor = "#FFFFFF"; // 深色模式下边框为白色
    toggleBtn.textContent = "切换深色模式 (当前: 深色)";
    localStorage.setItem("darkMode", "on"); // 保存偏好到localStorage
  } else {
    currentBorderColor = "#101010"; // 浅色模式下边框为深色
    toggleBtn.textContent = "切换深色模式 (当前: 浅色)";
    localStorage.setItem("darkMode", "off"); // 保存偏好到localStorage
  }

  // 动态修改目标div的底部边框颜色
  // 使用 borderBottomColor 属性来单独设置边框颜色
  borderDiv.style.borderBottomColor = currentBorderColor;
});

登录后复制

注意事项与最佳实践

元素选择器: 确保使用正确的 DOM 元素选择器。getElementById 用于 ID，getElementsByClassName 用于类名（返回 HTMLCollection），querySelector 或 querySelectorAll 提供更灵活的 CSS 选择器语法。
CSS 属性: 在 JavaScript 中操作样式时，请使用 DOM 元素的 style 属性。例如，要设置底部边框颜色，应使用 element.style.borderBottomColor，而不是 element.style.borderBottom（后者会覆盖所有边框属性）。
样式管理: 对于复杂的样式切换，优先考虑通过添加/移除 CSS 类来管理。例如，body.classList.toggle("dark-mode") 比手动修改 body.style.backgroundColor 和 body.style.color 更具维护性。然而，对于像 borderBottomColor 这种需要根据模式动态计算的特定属性，直接操作 style 属性也是可行的。
用户体验:
- 平滑过渡: 在 CSS 中为颜色属性添加 transition，可以使模式切换时的视觉效果更加平滑自然。
- 持久化: 使用 localStorage 存储用户偏好，确保用户在刷新页面后仍能保持其选择的模式，提升用户体验。
可访问性: 确保深色模式和浅色模式下的颜色对比度符合可访问性标准，以便所有用户都能清晰阅读内容。