点击切换深色模式时，.veritas类div的border-bottom不生效问题排查

问题描述 #

现有一套深色模式切换JavaScript代码，可正常切换页面背景色与文字颜色，但类名为.veritas的div元素的border-bottom颜色无法同步切换。

错误原因 #

1. 元素选择错误：使用document.getElementById(".veritas")尝试获取类名为.veritas的元素，但getElementById仅能通过ID属性匹配元素，无法识别类名前缀.，导致获取不到目标DOM元素。
2. 变量名冲突：初始声明的borderBottom变量用于存储DOM元素，但在点击事件中被重新赋值为颜色字符串，后续调用borderBottom.style.borderBottom时，变量已不再是DOM元素对象，无法设置样式。
3. 样式赋值格式错误：border-bottom是复合样式属性，需要完整的宽度 样式 颜色格式（如1px solid #FFFFFF），仅传入颜色值会导致样式无效。
4. 本地存储读取逻辑错误：读取本地存储的边框颜色时，错误复用了被覆盖的borderBottom变量，且未使用保存的savedBordersColor值，也未按正确格式设置样式。

修复方案 #

1. 修正元素选择方式：使用document.querySelector(".veritas")获取类名为.veritas的DOM元素，命名为veritasElement避免变量冲突。
2. 分离元素与颜色变量：用独立变量（如veritasBorderColor）存储边框颜色值，不与元素变量复用。
3. 设置完整复合样式：为border-bottom属性传入完整的样式字符串，确保覆盖原有CSS样式。
4. 修复本地存储读取逻辑：读取保存的边框颜色值，按正确格式设置元素样式。

修复后的完整代码 #

JavaScript #

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

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

  if (body.classList.contains("dark-mode")) {
    body.classList.remove("dark-mode");
    toggleBtn.textContent = "Dark mode is on";
    bgColor = "#FFFFFF";
    textColor = "#101010";
    veritasBorderColor = "#101010";
  } else {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
    bgColor = "#101010";
    textColor = "#FFFFFF";
    veritasBorderColor = "#FFFFFF";
  }

  body.style.backgroundColor = bgColor;
  body.style.color = textColor;
  veritasElement.style.borderBottom = `1px solid ${veritasBorderColor}`;

  // 保存到本地存储
  localStorage.setItem("bgColor", bgColor);
  localStorage.setItem("textColor", textColor);
  localStorage.setItem("borderBottom", veritasBorderColor);
});

// 读取本地存储的设置
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
var savedBorderColor = localStorage.getItem("borderBottom");

if (savedBgColor && savedTextColor) {
  body.style.backgroundColor = savedBgColor;
  body.style.color = savedTextColor;
  if (savedBorderColor) {
    veritasElement.style.borderBottom = `1px solid ${savedBorderColor}`;
  }
  if (savedBgColor === "#101010" && savedTextColor === "#FFFFFF") {
    body.classList.add("dark-mode");
    toggleBtn.textContent = "Dark mode is off";
  }
}

CSS #

body {
  margin: 0;
  height: 100%;
}

.dark-mode {
  background-color: #101010;
  color: #FFFFFF;
}

.veritas {
  width: 90%;
  border-bottom: 1px solid #101010;
}

HTML #

<button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
  border-bottom should change color in dark/light mode
</div>

内容的提问来源于stack exchange，提问作者user22034781