如何使用 JavaScript/jQuery 为网站创建暗/亮模式？-js教程-PHP中文网

首页

web前端

js教程

如何使用 JavaScript/jQuery 为网站创建暗/亮模式？

王林

Sep 14, 2023 pm 10:13 PM

如何使用 JavaScript/jQuery 为网站创建暗/亮模式？

深色模式对于任何网站都非常重要。不同兴趣的用户访问网站。有些人喜欢深色模式，有些人喜欢浅色模式。

根据一项调查，大约 70% 到 80% 的人喜欢深色模式，只有 20% 到 30% 的人喜欢浅色模式。因此，有必要为任何网站创建一个深色模式，允许用户在深色和浅色模式之间切换。

下面，我们将使用 HTML、CSS 和 JavaScript 创建一个简单的网页。此外，我们还将学习使用 JavaScript 和 CSS 实现明暗模式。

语法

用户可以按照以下语法在深色和浅色主题之间切换。

body.classList.toggle("dark-theme");

在上面的语法中，我们将深色主题类名作为切换方法的参数传递。它在特定的 HTML 元素中添加和删除类。

算法

用户可以按照以下算法在深色和浅色主题之间切换。

第 1 步 - 为网页编写 HTML 代码，并像往常一样为浅色主题应用 CSS。
第 2 步 - 使用 CSS 创建深色主题的样式。
第 3 步 - 创建一个按钮，并在按钮中添加 onclick 事件。当用户单击该按钮时，它应该在深色和浅色主题之间切换。
步骤 4 - 要在深色和浅色主题之间切换，我们可以从元素中添加和删除特定的类。例如，为深色主题创建一个类，并为深色主题创建 CSS。当我们在body中添加dark-theme类时，深色主题应该应用于整个网站，当我们删除它时，它应该是正常的。

示例 1

在下面的示例中，当用户单击按钮时，我们调用changeMode()函数。 changeMode() 函数根据主题更改按钮的文本。

此外，我们使用 document.body 访问整个网页，并使用 JavaScript 将 dark-theme 类添加到整个网页，以将主题更改为深色模式。



   


   Using the  toggle method to  toggle between light and dark mode in JavaScript. 
   This is the content of the webpage. 
   
   <script>
      function changeMode() {
         var body = document.body;
         
         // toggle the theme
         body.classList.toggle(&quot;dark-theme&quot;);
         let button = document.getElementById('button');
         
         // change the button text
         if (button.innerHTML == "Dark Mode") {
            button.innerHTML = "Normal Mode";
         } else {
            button.innerHTML = "Dark Mode"
         }
      }
   </script>

示例 2

在下面的示例中，我们使用 HTML 和 CSS 创建了切换开关按钮。我们使用了切换开关的复选框。因此，每当用户选中该复选框时，开关就会打开。因此，我们可以根据是否选中该复选框来添加和删除深色主题的类。

此外，我们还使用了JQuery的addClass()和removeClass()方法来添加和删除主体中的类。

<html>
<head>
   <style>
      body {
         color: black;
         background-color: rgb(241, 241, 241);
         text-align: center;
         justify-content: center;
      }
      .dark-class {
         color: white;
         background-color: rgb(12, 10, 10);
      }
      p {
         font-size: 1.2rem;
      }
      .toggleButton {
         width: 5rem;
         height: 2rem;
         position: relative;
         display: inline-block;
      }
      .toggleButton input {
         opacity: 0;
      }
      .roundButton {
         background-color: black;
         top: 0;
         left: 0;
         position: absolute;
         right: 0;
         bottom: 0;
         cursor: pointer;
      }
      .roundButton:before {
         left: 0;
         bottom: 0;
         position: absolute;
         content: "";
         background-color: grey;
         transition: 1s;
         height: 2rem;
         width: 2rem;
      }
      input:checked+.roundButton {
         background-color: white;
      }
      input:checked+.roundButton:before {
         transform: translateX(3rem);
      }
      .roundButton.circle {
         border-radius: 2rem;
      }
      .roundButton.circle:before {
         border-radius: 50%;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
   Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
   crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
</head>
<body>
   <h2 id="Using-the-i-JQuery-i-to-toggle-between-light-and-dark-modes-in-JavaScript">Using the <i> JQuery </i> to toggle between light and dark modes in JavaScript.</h2>
   <p>This is the content of the webpage.</p>
   <label class = "toggleButton">
      <input type = "checkbox" id = "toggle">
      <div class = "roundButton circle" ></div>
   </label>
   <script>
      // If the input checkbox is checked, activate dark mode by adding dark-class to the body
      $('#toggle').change(() => {
         if ($('#toggle').is(":checked")) {
            $("body").addClass("dark-class");
         } else {
            $("body").removeClass("dark-class")
         }
      })
   </script>
</body>
</html>

我们学会了使用 JavaScript 和 JQuery 在深色模式和浅色模式之间进行切换。我们需要更改网页的 CSS 并将 CSS 应用于深色主题。我们可以通过在网页中添加和删除类来将 CSS 应用到暗模式。

以上是如何使用 JavaScript/jQuery 为网站创建暗/亮模式？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。