我正在为我的网站创建一个深色/浅色主题切换。我在我的网站上使用 Bootstrap 导航栏。我正在使用 JavaScript 事件侦听器来更改主题。我需要将 Bootstrap 导航栏更改为深色主题版本。
我遇到的问题是，当单击“深色主题”按钮时，我希望能够将 data-bs-theme="dark" 添加到我的元素中。我尝试使用 setAttribute (element.setAttribute("class", "democlass");) 但这不起作用，因为它无法将 'data-bs-theme' 识别为属性。我还有其他方法可以做到这一点吗？
我尝试过：
function changeTheme() { let nav = document.querySelector("nav"); nav.setAttribute("data-bs-theme", "dark"); }非常感谢您的帮助！
从docs中，您需要将该属性应用于导航栏的父级，以便引导程序识别主题。
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
const navParent = document.querySelector(".navbar-parent")
var flag = false;
darkModeToggle.addEventListener('change', () => {
if (flag = !flag) {
navParent.setAttribute('data-bs-theme', "dark");
} else {
navParent.removeAttribute('data-bs-theme');
}
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="navbar-parent">
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-primary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<div class="container mt-5">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeToggle">
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
</div>
<h1 class="mt-3">Hello, Bootstrap!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>