我正在Flask 中开发一项功能，可以在深色和浅色主题之间切换。我在单独的文件中使用 Flask、CSS 和 Javascript。单击切换按钮时，css 样式表不会更改。
application
├── static
│ ├── css
│ | ├── base-theme.css
│ | ├── dark-theme.css
│ └── js
│ ├── switch_themes.js
├── templates
│ ├── base.html
基本文件
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Application</title>
<meta name="description" content="Application">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/base-theme.css') }}" id="switch_theme">
<script type="text/javascript" src="{{ url_for('static', filename='js/switch_themes.js') }}"></script>
</head>
<body>
<div class="topnav">
<table class="topnav_right">
<tbody>
<tr>
<td>
<div class="topnav_theme">
<table>
<tbody>
<tr>
<td><a class="theme" href="/">THEME</a></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="topnav_mode">
<table>
<tbody>
<tr>
<td>
<button id="btn-toggle">
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</tr>
</td>
</tbody>
</table>
</div>
{% block body %}{% endblock %}
</body>
</html>
switch_themes.js
window.onload = function () {
const toggle = document.getElementById("btn-toggle");
const theme = document.getElementById("switch_theme");
toggle.addEventListener("click", function () {
if (theme.getAttribute("href") == "/static/css/base-theme.css") {
theme.href = "/static/css/dark-theme.css";
} else {
theme.href = "/static/css/base-theme.css";
}
});
}
该应用程序可以正常工作（浏览器控制台中也没有错误），但是当单击切换按钮 (btn-toggle) 时主题不会切换。
最好的祝福，
马丁
我解决了这个问题。
它实际上是有效的，但是<button>由于<label>和<span>标签，它是多余的并且单击按钮的区域太小。我已经更改了下面的代码，现在它可以工作了：
<td>
<label class="switch">
<input type="checkbox" id="btn-toggle">
<span class="slider"></span>
</label>
</td>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句