javascript Onclick将border-bottom更改为div by classname并设置暗模式开/关

lokaqttq  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(86)

我有这个黑暗模式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

0kjbasz6

0kjbasz61#

有几个错误
1 .veritas是一个类,您可以使用

borderBottom=document.getElementById(".veritas");.

将其更改为使用className

var borderBottom=document.getElementsByClassName("veritas")[0];

或querySelector

var borderBottom=document.querySelector(".veritas");
  1. borderBottom.style.borderBottom = borderBottom;这应该包含width style color,当你只提供颜色时,改变所有出现的
borderBottom = "#FFFFFF";

borderBottom = "1px solid #FFFFFF";
oipij1gg

oipij1gg2#

它是这样工作的

var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderDiv=document.getElementsByClassName("veritas")[0];

toggleBtn.addEventListener("click", function() {
  var bgColor, textColor,borderBottom;

  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;
  borderDiv.style.borderBottomColor = borderBottom;

});
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>

相关问题