通过类名批量选择元素，用toggle切换类实现暗黑模式切换

问题排查 #

你尝试的代码存在两处关键错误：

• 拼写错误：getElementByClassName应为**getElementsByClassName**（注意复数Elements）
• 集合操作错误：获取到的元素集合不能直接调用classList，需遍历单个元素，且classlist要写成大写开头的**classList**

正确实现方案 #

1. 原生JavaScript实现 #

方案一：使用getElementsByClassName遍历

function darkmode() {
  const inputElements = document.getElementsByClassName('input');
  for (let i = 0; i < inputElements.length; i++) {
    inputElements[i].classList.toggle('input-darkmode');
  }
}

方案二：用querySelectorAll简化遍历

querySelectorAll返回的NodeList支持直接用forEach，代码更简洁：

function darkmode() {
  document.querySelectorAll('.input').forEach(el => {
    el.classList.toggle('input-darkmode');
  });
}

2. jQuery实现（你已引入jQuery，最简洁） #

利用jQuery的选择器和toggleClass方法，一行代码完成批量切换：

function darkmode() {
  $('.input').toggleClass('input-darkmode');
}

额外优化建议 #

如果要做完整的暗黑主题，更高效的方式是给<body>切换主题类，通过CSS全局控制样式，避免逐个操作元素：

/* 亮色主题默认样式 */
body { background: #ffffff; color: #333333; }
.input { border: 1px solid #cccccc; background: #fff; }

/* 暗黑主题样式 */
body.dark-theme { background: #1a1a1a; color: #ffffff; }
body.dark-theme .input { border-color: #444444; background: #333333; color: #fff; }

对应的JS只需要切换body的类：

function darkmode() {
  document.body.classList.toggle('dark-theme');
}

内容的提问来源于stack exchange，提问作者William A.l