最轻量做法是用 classlist.toggle() 或 replace() 切换 bootstrap 预设 bg-* 类，需先移除旧类、确保 navbar 有唯一 id、处理 fixed 定位遮挡和 collapse 区域不同步问题。
点击按钮触发 Navbar 背景色变更的 DOM 操作逻辑
直接改 navbar 元素的 style.backgroundColor 或 class 是最轻量的做法，但要注意 Bootstrap 的默认样式优先级——很多背景色是通过 .bg-light、.bg-dark 这类预设 class 控制的，单纯内联 style 可能被覆盖。
推荐用 classList.toggle() 或 classList.replace() 切换预设背景 class，既兼容 Bootstrap 的 CSS 体系，又避免手写颜色值带来的维护问题。
- 确保目标 navbar 有唯一
id（如id="main-navbar"），否则document.getElementById()会失效 - 不要用
setAttribute('class', ...)全量重写 class，会意外清掉navbar-expand-md等响应式类 - 如果用了
data-bs-theme="dark"这类新特性，切换背景色后可能需同步调整文字对比度（比如加.text-white）
用 JavaScript 动态切换 Bootstrap 5 的 bg-* 类
Bootstrap 5 提供了 bg-primary、bg-success、bg-info 等语义化背景类，它们内部用 background-color 实现，且带足够 specificity，比自定义 style 更可靠。
下面这段代码绑定在按钮 click 事件里即可生效：
const navbar = document.getElementById('main-navbar');
const colors = ['bg-light', 'bg-dark', 'bg-primary', 'bg-warning'];
let index = 0;
<p>document.getElementById('change-bg-btn').addEventListener('click', () => {
navbar.classList.remove(...colors);
navbar.classList.add(colors[index]);
index = (index + 1) % colors.length;
});</p>
- 必须先
remove所有可能存在的 bg-* 类，否则多个 class 同时存在时以 CSS 文件中靠后的规则为准 - 如果只换一种颜色（比如固定切到
bg-danger），直接navbar.classList.replace('bg-light', 'bg-danger')更简洁 - 注意
bg-body-secondary这类新 class 在 v5.3+ 才支持，旧版本会无效
避免因 navbar 固定定位导致背景色“看不见”
常见现象：代码执行了，class 也加上了，但页面上没变化。大概率是 navbar 使用了 position: fixed，而它的父容器没有设置 padding-top，导致 navbar 被内容遮挡，或背景色被下方元素盖住。
- 检查是否漏写了
body的padding-top（值应 ≥ navbar 高度），尤其在切换背景色后视觉突兀时 - 若 navbar 内含
<nav class="navbar navbar-expand-lg"></nav>，确认它没被包裹在overflow: hidden的容器里 - 用浏览器开发者工具检查 computed styles，看最终生效的
background-color值是不是期望的颜色，而不是透明或继承值
移动端下 navbar 折叠菜单展开时背景色不同步的问题
当屏幕宽度 ≤ lg（992px），navbar 默认折叠，点击 hamburger 按钮展开菜单时，dropdown 区域的背景色可能还是旧值——因为 Bootstrap 的 collapse JS 插件会动态插入一个 <div class="navbar-collapse">，它的背景色不继承父 navbar。<ul>
<li>需要额外给 <code>.navbar-collapse 设置 background，例如：navbarCollapse.style.backgroundColor = getComputedStyle(navbar).backgroundColor;
show.bs.collapse 和 hide.bs.collapse 事件，在展开/收起时同步更新 collapse 区域的 classdata-bs-theme="dark"，切换背景色后记得同步设置 data-bs-theme 属性，否则 dropdown 文字可能反色失败实际改起来就几行 JS，但容易卡在 class 冲突、fixed 定位遮挡、collapse 区域不同步这三个点上。尤其是第三个，不打开移动端调试器真看不出问题。
