使用JavaScript实现深色模式切换与动态边框颜色调整-js教程-PHP中文网

使用JavaScript实现深色模式切换与动态边框颜色调整

聖光之護

发布： 2025-11-23 13:40:16

原创

782人浏览过

使用JavaScript实现深色模式切换与动态边框颜色调整

本教程详细讲解如何利用javascript、css和html构建一个深色模式切换功能。内容涵盖dom元素选择、css类管理、动态样式应用（特别是如何正确修改特定元素的 border-bottom 颜色），以及通过 localstorage 实现用户偏好持久化，确保页面在不同模式间平滑切换并保持视觉一致性。

在现代网页设计中，提供深色模式（Dark Mode）已成为提升用户体验的重要功能之一。它不仅能减少夜间使用时的视觉疲劳，还能在特定设备上节省电量。本教程将指导您如何使用纯JavaScript、CSS和HTML实现一个功能完善的深色模式切换器，并特别关注如何动态调整特定元素的边框颜色。

1. HTML 结构

首先，我们需要一个简单的HTML结构，包括一个用于切换模式的按钮和一个带有特定类名（例如 .veritas）的 div 元素，其边框颜色需要随模式变化。

<!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>

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

登录后复制

2. CSS 样式定义

接下来，我们定义页面的基础样式和深色模式下的特定样式。.dark-mode 类将应用于 body 元素，以改变背景和文本颜色。同时，为 .veritas 元素设置初始边框样式。

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

.dark-mode {
    background-color: #101010; /* 深色模式背景 */
    color: #FFFFFF; /* 深色模式文本颜色 */
}

button {
    padding: 10px 20px;
    margin-bottom: 20px;
    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;
}

.dark-mode button {
    background-color: #333;
    color: #f0f0f0;
    border-color: #555;
}

.veritas {
    width: 90%;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #101010; /* 默认浅色模式下边框颜色 */
    transition: border-bottom-color 0.3s ease; /* 平滑过渡 */
}

登录后复制

3. JavaScript 逻辑实现

JavaScript 是实现深色模式切换的核心。我们将编写逻辑来：

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

获取DOM元素。
定义一个函数来应用主题样式。
为按钮添加事件监听器。
在页面加载时检查并应用之前保存的用户偏好。

// 1. 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
// 正确获取具有特定类名的元素。注意：getElementsByClassName 返回一个HTMLCollection，需要通过索引 [0] 获取第一个元素。
var borderDiv = document.getElementsByClassName("veritas")[0];

/**
 * 应用主题样式
 * @param {boolean} isDarkMode - 如果为true，则应用深色模式；否则应用浅色模式。
 */
function applyTheme(isDarkMode) {
    let bgColor, textColor, borderColor;
    let buttonText;

    if (isDarkMode) {
        // 切换到深色模式
        body.classList.add("dark-mode");
        buttonText = "关闭深色模式";
        bgColor = "#101010"; // 深色模式背景色
        textColor = "#FFFFFF"; // 深色模式文本颜色
        borderColor = "#FFFFFF"; // 深色模式边框颜色
    } else {
        // 切换到浅色模式
        body.classList.remove("dark-mode");
        buttonText = "开启深色模式";
        bgColor = "#FFFFFF"; // 浅色模式背景色
        textColor = "#101010"; // 浅色模式文本颜色
        borderColor = "#101010"; // 浅色模式边框颜色
    }

    // 应用body的背景和文本颜色
    body.style.backgroundColor = bgColor;
    body.style.color = textColor;

    // 检查borderDiv是否存在，然后正确设置其下边框颜色
    if (borderDiv) {
        borderDiv.style.borderBottomColor = borderColor;
    }

    // 更新按钮文本
    toggleBtn.textContent = buttonText;

    // 将用户偏好保存到 localStorage，以便下次访问时记住
    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
}

// 2. 为切换按钮添加点击事件监听器
toggleBtn.addEventListener("click", function() {
    // 判断当前是否处于深色模式
    const isCurrentlyDarkMode = body.classList.contains("dark-mode");
    // 切换到相反的模式
    applyTheme(!isCurrentlyDarkMode);
});

// 3. 页面加载时，根据 localStorage 中的偏好应用主题
document.addEventListener("DOMContentLoaded", function() {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme === "dark") {
        applyTheme(true); // 应用深色模式
    } else {
        // 如果没有保存偏好或偏好为"light"，则默认应用浅色模式
        applyTheme(false);
    }
});

登录后复制

关键点与注意事项

DOM 元素选择器的准确性：

What-the-Diff
检查请求差异，自动生成更改描述

103

查看详情
- document.getElementById("toggleBtn") 用于通过 id 属性获取唯一元素。
- document.getElementsByClassName("veritas") 用于通过 class 属性获取元素。它返回一个 HTMLCollection（类似数组），因此您需要使用 [0] 来访问第一个匹配的元素，例如 document.getElementsByClassName("veritas")[0]。这是原始问题中导致边框不变化的根本原因之一。
CSS 属性设置的正确方式：
- 要改变元素的 border-bottom 颜色，应使用 element.style.borderBottomColor = colorValue;。直接设置 element.style.borderBottom = colorValue; 会覆盖整个 border-bottom 属性（包括宽度和样式），这通常不是我们想要的。
利用 CSS 类管理复杂样式：
- 通过在 body 元素上添加或移除 dark-mode 类，可以利用 CSS 的级联特性一次性改变多个元素的样式，使代码更简洁、更易于维护。例如，您可以为深色模式下的链接、段落等定义不同的颜色，而无需在 JavaScript 中逐一修改。
localStorage 的应用：
- 使用 localStorage.setItem("key", "value") 和 localStorage.getItem("key") 可以将用户的偏好设置持久化存储在浏览器中。这样，即使用户关闭并重新打开页面，也能保持其上次选择的模式，提升用户体验。
代码可维护性和可扩展性：
- 将主题应用逻辑封装在 applyTheme 函数中，提高了代码的复用性和可读性。未来如果需要添加更多主题或样式调整，只需修改此函数即可。
- 在访问 borderDiv 的 style 属性之前进行 if (borderDiv) 检查，可以避免在元素不存在时引发JavaScript错误，增加了代码的健壮性。

总结

通过本教程，您已经学会了如何构建一个功能齐全的深色模式切换器，它不仅能改变页面的背景和文本颜色，还能精确地控制特定元素的边框颜色，并能记住用户的偏好。掌握这些技术将有助于您创建更具交互性和用户友好性的网页应用。在实际项目中，您还可以考虑结合媒体查询 @media (prefers-color-scheme: dark) 来根据用户操作系统的偏好提供默认模式，进一步提升用户体验。

以上就是使用JavaScript实现深色模式切换与动态边框颜色调整的详细内容，更多请关注php中文网其它相关文章！