本文教你用原生 javascript 快速实现页面背景色在黑白之间切换，修正初学者常见的 dom 获取错误和 css 属性误写问题，代码简洁可直接运行。
本文教你用原生 javascript 快速实现页面背景色在黑白之间切换，修正初学者常见的 dom 获取错误和 css 属性误写问题，代码简洁可直接运行。
要让按钮真正控制页面背景色（即实现基础版“亮/暗模式”），需同时解决三个关键问题：正确获取 body 元素、使用合法的 CSS 属性名、避免语法错误。你原代码中的 document.getElementById('body').x.style.background = "color:black" 存在三处典型错误：
- ❌ getElementById('body') 要求 <body> 标签必须有 id="body"（这点你已做对，很好！）；
- ❌ .x 是无效属性，应直接访问 .style；
- ❌ background 不是标准写法，且 "color:black" 语法错误——CSS 中 background 是复合属性，而 black 是颜色值，不是 color: 前缀；正确写法是 backgroundColor = "black"（注意驼峰命名）或 background = "black"（简写，但推荐前者更明确）。
✅ 正确且推荐的写法如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>亮暗模式示例</title>
</head>
<body id="body">
<h1>我的网站</h1>
<p>点击按钮切换主题：</p>
<button onclick="light_mode()">Light mode</button>
<button onclick="dark_mode()">Dark mode</button>
<script>
function dark_mode() {
document.getElementById('body').style.backgroundColor = "black";
document.getElementById('body').style.color = "white"; // 可选：同步调整文字色提升可读性
}
function light_mode() {
document.getElementById('body').style.backgroundColor = "white";
document.getElementById('body').style.color = "black"; // 恢复默认文字色
}
</script>
</body>
</html>? 注意事项与进阶提示：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 不建议将 <button> 写在 <body> 外部（如 <head> 中），否则 document.getElementById('body') 可能因 DOM 未加载而返回 null；上面示例已确保结构正确。
- 更健壮的做法是用 document.body 直接引用 body 元素，无需额外 id：
function dark_mode() { document.body.style.backgroundColor = "black"; } - 若希望样式持久化（刷新后仍保留），可结合 localStorage 存储用户偏好；
- 真实项目中推荐使用 CSS 变量 + class 切换（如 body.light / body.dark），便于维护和扩展响应式设计。
掌握这个小技巧，是你迈向前端交互开发的重要一步——从“能跑”走向“可靠”与“可扩展”。
立即学习“Java免费学习笔记（深入）”；
