输入复选框在亮/暗模式之间切换。但是,我希望它作为 2 个独立的按钮。我该怎么办?
演示:https://jsfiddle.net/ot1ecnxz/1
HTML:
<input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" />
<hr />
<button type="button" data-bs-theme-value="light"> Light </button>
<button type="button" data-bs-theme-value="dark"> Dark </button>
<hr />
<p>
This is a sample text
</p>
JS:
function myFunction() {
var element = document.body;
element.dataset.bsTheme =
element.dataset.bsTheme == "dark" ? "light" : "dark";
}
如果用 2 个专用按钮代码替换复选框来实现这一点应该是,
HTML:
<button type="button" data-bs-theme-value="light" onclick="setTheme('light')"> Light </button>
<button type="button" data-bs-theme-value="dark" onclick="setTheme('dark')"> Dark </button>
<hr />
<p>
This is a sample text
</p>
Javascript:
function setTheme(theme) {
document.body.dataset.bsTheme = theme;
}
您可以尝试以下方法:
document.getElementById("lightButton").addEventListener("click", function() {
toggleMode('light');
});
document.getElementById("darkButton").addEventListener("click", function() {
toggleMode('dark');
});
function toggleMode(mode) {
var element = document.body;
element.dataset.bsTheme = mode;
}
<link id="themeLink" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button type="button" data-bs-theme-value="light" id="lightButton"> Light </button>
<button type="button" data-bs-theme-value="dark" id="darkButton"> Dark </button>
<hr />
<p>This is a sample text</p>