我有一个样式为切换按钮的复选框。此复选框用于更改颜色主题。我想找到一种方法，使它不会通过刷新来改变主题。
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
这就是我的javaScript，它将运行这段代码。
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" title="change the theme color" id="checkbox">
</label>
</div>
那是我的HTML5。
您可以在用于链接外部css的<head>标记中放置的<link>标记中放置一个id。
<head>
<!--other tags -->
<link id="page-theme" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<input type="checkbox" title="" id="checkbox">
<label class="theme-switch" for="checkbox">
change the theme color
</label>
</div>
</body>
如果你有一个按钮，你可以
const checkbox = document.getElementById("checkbox");
checkbox.addEventListener("click", switchTheme);
// supose you have two stylesheet light.css and dark.css
function switchTheme(event) {
const lightThemeSheet = "light.css";
const darkThemeSheet = "dark.css";
const isChecked = event.target.checked; //this return a boolean
if(!isChecked) return
// here you select the link tag in the head
const pageThemeLink = document
.getElementById("page-theme")
.getAttribute("href");
document
.getElementById("page-theme")
.setAttribute(
"href",
pageThemeLink === "light.css" ? darkThemeSheet : lightThemeSheet
);
}