在Vanilla Javascript中使用按钮的黑暗模式
在Vanilla Javascript中使用按钮的黑暗模式
提问于 2019-07-22 02:26:32
所以基本上，我遇到了一个按钮的问题，这个按钮应该可以将网站切换到黑暗模式。我也有一个夜间模式，它使网站变暗根据是在日落之后或在日出之前，在用户的当前位置，这个夜间模式工作。所以我知道这一定是关于我的js的问题…
我已经尝试过先添加lightMode，然后删除darkMode，但也不起作用……
<button
type="button"
class="btn btn-outline-secondary"
id="buttonChangeMode"
>
<i class="far fa-moon"></i>
</button>.lightMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: white;
}
.darkMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: rgb(7, 8, 14);
}function changeMode() {
let mode = document.getElementById("body");
if (mode.classList.contains("lightMode")) {
mode.classList.add("darkMode").remove("lightMode");
} else if (mode.classList.contains("lightMode")) {
mode.classList.remove("darkMode").add("lightMode");
}
}
let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);在控制台中，出现的错误是：“未捕获TypeError:无法读取未定义的HTMLButtonElement.changeMode的属性'remove‘”
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-22 05:04:18
.classList的.toggle()方法是最简单的方法。如果您使用id，那么只要有可能，您就只能限制您代码使用class。详细信息请在demo中进行评论。
// Pass Event Object
function changeMode(event) {
// Event.target always points to what user clicked, hovered over, changed etc,
const clicked = event.target;
// Reference body.all
const all = document.querySelector('.all');
// If the clicked tag has .mode class...
if (clicked.matches('.mode')) {
// Toggle .fa-sun, .btn-outline-dark, ,btn-outline-light, and .fa-moon on button.mode
clicked.classList.toggle('fa-moon');
clicked.classList.toggle('btn-outline-dark');
clicked.classList.toggle('fa-sun');
clicked.classList.toggle('btn-outline-light');
// Toggle .darkMode and .lightMode on body.all
all.classList.toggle('darkMode');
all.classList.toggle('lightMode');
}
return false;
}
// Reference button.mode
const mode = document.querySelector(".mode");
// Register button.mode to the click event
mode.addEventListener("click", changeMode);.lightMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: white;
}
.darkMode .app {
border: 1px solid #0b0b35;
padding: 20px 15px;
max-width: 1000px;
max-height: 2500px;
margin: 30px auto;
border-radius: 10px;
background-color: rgb(7, 8, 14);
}<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body class='all lightMode'>
<main class='app container'>
<section class='row'>
<article class='col-6'>
<button class="mode btn btn-outline-dark far fa-sun" type="button"></button>
</article>
<figure class='col-6'>
<img src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' style='width:80%'>
</figure>
</section>
</main>
</body>
</html>
Stack Overflow用户
发布于 2019-07-22 03:37:06
您没有提供超文本标记语言片段-如果超文本标记语言<body>标记没有ID，如下所示：
<html>
...
<body id="body">
...因为getElementById()函数需要一个DOM元素ID值的参数，所以let mode = document.getElementById("body");语句的结果将是未定义的，因此您将得到该错误。
请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Stack Overflow用户
发布于 2019-07-22 04:15:51
您应该像这样添加/删除类：
<script>
function changeMode() {
let mode = document.getElementsByTagName("body")[0]; // set a variable for body tag
if (mode.classList.contains("lightMode")) {
mode.classList.add("darkMode")
mode.classList.remove("lightMode");
}
else {
mode.classList.add("lightMode")
mode.classList.remove("darkMode");
}
}
let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);
</script>你可以阅读更多here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57135906
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号