如何用JavaScript实现网页的亮色与暗色模式切换-js教程-PHP中文网

如何用JavaScript实现网页的亮色与暗色模式切换

本文介绍如何通过简单的javascript函数控制页面背景色，在亮色模式（白色）和暗色模式（黑色）之间切换，修正初学者常见的dom获取与样式设置错误。

本文介绍如何通过简单的javascript函数控制页面背景色，在亮色模式（白色）和暗色模式（黑色）之间切换，修正初学者常见的dom获取与样式设置错误。

要实现按钮切换网页背景色（即基础版“亮/暗模式”），关键在于正确获取

元素并设置其 backgroundColor 样式属性。你原代码中存在三处典型错误：

错误的元素获取方式：document.getElementById('body').x 中的 .x 是无效属性，应直接调用 .style；
错误的CSS属性写法："color:black" 混淆了 color（文字颜色）与 background 或 backgroundColor（背景颜色），且 color: 不是合法的CSS值格式；
HTML结构缺失：

✅ 正确做法如下：

HTML 结构（确保包含 id="body"，按钮位于其中）：

OpenJDK 24

下载



  <title>Light/Dark Mode Demo</title><h1>我的网站</h1>
  <button onclick="light_mode()">Light mode</button>
  <button onclick="dark_mode()">Dark mode</button>

<script>
  // JavaScript 放在 body 底部，确保 DOM 已加载
  function dark_mode() {
    document.getElementById('body').style.backgroundColor = "black";
  }

  function light_mode() {
    document.getElementById('body').style.backgroundColor = "white";
  }
</script>

? 注意事项：

backgroundColor 是 JavaScript 中的标准驼峰式属性名（对应 CSS 的 background-color）；
不要写成 "color:black" 或 "background: black"（后者虽部分生效，但推荐使用 backgroundColor 更精准）；
若将 <script> 放在 <head> 中，请务必包裹在 window.onload 或 DOMContentLoaded 事件中，避免因 DOM 未就绪导致 getElementById 返回 null； </script>
实际项目中建议使用 CSS 类（如 body.light, body.dark）配合 classList.toggle() 管理主题，便于扩展字体、链接、表单等全局样式。

? 小结：一个可工作的亮/暗模式只需两步——准确获取目标元素 + 正确设置内联样式。掌握 element.style.propertyName = "value" 这一基本模式，是前端交互开发的重要起点。