我有这个黑暗模式JavaScript,它改变了背景颜色和文本字体颜色完美,但我需要它也改变了div类名称.veritas
的底部边框,这部分是不工作的
下面是代码:
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderBottom = document.getElementById(".veritas");
toggleBtn.addEventListener("click", function() {
var bgColor, textColor;
if (body.classList.contains("dark-mode")) {
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on";
bgColor = "#FFFFFF";
textColor = "#101010";
borderBottom = "#101010";
} else {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
bgColor = "#101010";
textColor = "#FFFFFF";
borderBottom = "#FFFFFF";
}
body.style.backgroundColor = bgColor;
body.style.color = textColor;
borderBottom.style.borderBottom = borderBottom;
// Save the chosen colors to localStorage
localStorage.setItem("bgColor", bgColor);
localStorage.setItem("textColor", textColor);
localStorage.setItem("borderBottom", borderBottom);
});
// Retrieve saved colors from localStorage
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
var savedBordersColor = localStorage.getItem("borderBottom");
if (savedBgColor && savedTextColor) {
body.style.backgroundColor = savedBgColor;
body.style.color = savedTextColor;
borderBottom.style.borderBottom = borderBottom;
if (savedBgColor === "#101010" && savedTextColor === "#FFFFFF") {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
}
}
body {
margin: 0;
height: 100%;
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
.veritas {
width: 90%;
border-bottom: 1px solid #101010;
}
<button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
border-bottom should change color in dark/light mode
</div>
为什么这不会改变div类名.veritas
中的border-bottom
?
我创建了一个Codepen来查看它的实际操作https://codepen.io/familias/pen/gOQMrjX
2条答案
按热度按时间0kjbasz61#
有几个错误
1
.veritas
是一个类,您可以使用将其更改为使用className
或querySelector
borderBottom.style.borderBottom = borderBottom;
这应该包含width style color
,当你只提供颜色时,改变所有出现的到
oipij1gg2#
它是这样工作的