我在网页上创建了一个亮/暗模式切换。切换本身是一个图像，当单击时会更改页面背景颜色和文本颜色，以及一些附带的内容，如图像背景颜色更改。当图像被点击时，它调用了一个JS函数，该函数为每个需要更改的元素切换一个类。最初，我为每个元素创建了一个函数，并为每个元素创建了一个独特的类来触发各种更改，它可以工作，但是我想简化函数，并让所有元素共享一个“亮/暗模式”类，以便函数可以切换它们。但是现在代码似乎没有按预期的那样响应。我是JavaScript的新手，所以我确信这是我的一个明显的错误。不同的脚本在页面上工作，因此页面正确链接.js文件。请看下面的代码。我已经删除了我认为不相关的部分。如果有更好的办法我洗耳恭听。谢谢你！
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
<span class="light-switch-span">
<img class="light-switch light-mode" src="idea.png" onclick="lightMode()">
</span>
<script src="myScript.js"></script>
<div class="photo-div">
<img class="photo light-mode" src="img.png"></div>
</div>
</body>
</html>/* CSS */
body {
margin: 0;
font-family: 'Poppins';
background-color: black;
color: white;
}
body.light-dark {
background-color: white;
color: black;
transition: 0.5s;
}
.light-switch-span {
padding: 0;
}
.light-switch {
width: 2.5%;
height: auto;
position: absolute;
right: 0%;
object-fit: contain;
margin-right: 5%;
transition: filter .5s ease-in-out;
}
.light-switch.light-dark {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.photo {
object-fit: contain;
height: auto;
width: 100%;
border: 10px solid;
border-radius: 50%;
background-color: white;
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.photo.light-dark {
background-color: black;
}// JavaScript
function lightMode() {
var all = document.querySelector(".light-mode");
for(var i = 0; i < all.length; i++) {
element.classList.toggle("light-dark");
}
}
1条答案
按热度按时间e1xvtsh31#
首先，必须使用
querySelectorAll方法来获取所有匹配的元素那么，从哪里获取元素变量呢？我觉得你想这么做