如何使用 JavaScript 切换或更改 HTML class 名称

Question

单击主题更改按钮时，我尝试更改导航栏的颜色。

这是 HTML 代码

<header class="header">
  <a href="#">
    <img class="logo" alt="logo" src="img/logo.png" />
  </a>
  <nav class="main-nav" id="main-nav">
    <ul class="main-nav-list">
      <li>
        <a class="main-nav-link" href="#introduction">Intro</a>
      </li>
      <li>
        <a class="main-nav-link" href="#portfolio">Projects</a>
      </li>
      <li>
        <a class="main-nav-link" href="#contact">Hello</a>
      </li>
      <!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
    </ul>
  </nav>
</header>

Javascript 代码

const themeChange = () => { 
   const navElements = document.getElementsByClassName("main-nav-link");
    // console.log("nav: " + navElements.length);
    for (let i = 0; i <= navElements.length; i++) {
      console.log(document.getElementsByClassName("main-nav-link")[i]);
      document.getElementsByClassName("main-nav-link")[i].className =
        "main-nav-link-summer";
    }
}

我正在尝试将 class 名称从“main-nav-link”更改为“main-nav-link-summer”，以便可以更改活动颜色 hover。 但奇怪的是，只有第一个和第三个标签发生了变化，而第二个标签保持不变。 “navElements”变量的长度是 3。

CSS代码

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 4.8rem;
  align-items: center;
  /* padding-right: 5rem; */
  /* font-size: x-large; */
}

.main-nav-link,
.main-nav-link-summer {
  text-decoration: none;
  display: inline-block;
  color: white;
  font-weight: 500;
  /* font size 1.8 */
  font-size: 2.5rem;
  transition: all 0.3s;
}

.main-nav-link-summer:hover,
.main-nav-link-summer:active {
  color: #1d4116;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #a63ec5;
}

.sticky {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
  opacity: 0.8;
}

.sticky .main-nav-link {
  color: #46244c;
}

.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
  color: #a63ec5;
}

Answer 1

在 javascript 中，这是最简单的方法，对于你想要实现的目标，我不太确定。

 const navElements = document.querySelectorAll(".main-nav-link"); navElements.forEach((link) => { link.classList.add("main-nav-link-summer"); });

 .main-nav-list { list-style: none; display: flex; gap: 4.8rem; align-items: center; /* padding-right: 5rem; */ /* font-size: x-large; */ }.main-nav-link, .main-nav-link-summer { text-decoration: none; display: inline-block; color: white; font-weight: 500; /* font size 1.8 */ font-size: 2.5rem; transition: all 0.3s; }.main-nav-link-summer:hover, .main-nav-link-summer:active { color: #1d4116; }.main-nav-link:hover, .main-nav-link:active { color: #a63ec5; }.sticky { position: fixed; top: 0; bottom: 0; width: 100%; height: 8rem; padding-top: 0; padding-bottom: 0; background-color: rgba(255, 255, 255, 0.97); z-index: 999; box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03); opacity: 0.8; }.sticky.main-nav-link { color: #46244c; }.sticky.main-nav-link:hover, .sticky.main-nav-link:active { color: #a63ec5; }

 <header class="header"> <a href="#"> <img class="logo" alt="logo" src="img/logo.png" /> </a> <nav class="main-nav" id="main-nav"> <ul class="main-nav-list"> <li> <a class="main-nav-link" href="#introduction">Intro</a> </li> <li> <a class="main-nav-link" href="#portfolio">Projects</a> </li> <li> <a class="main-nav-link" href="#contact">Hello</a> </li> <!-- <li><a class="main-nav-link" href="#">section4</a></li> --> </ul> </nav> </header>

Answer 2

我建议一起采用不同的方法。 经历并进行大量 class 名称更改对于开发和维护来说确实不是最佳选择。 也许考虑像下面的示例这样的方法，而不是使用单独的 css var 主题的简单概念证明，这样您在构建时就不会考虑这些事情，并且可以更灵活地处理设计系统，而无需堆积大量不必要的额外代码。 干杯。

 const htmlEl = document.documentElement; // set a detault or read their saved selection from localstorage or whatever. htmlEl.dataset.theme = 'default'; // set the new selectiong when made. toggleTheme = (theme) => htmlEl.dataset.theme = theme;

 html[data-theme="default"] { --body-bg: #f1f1f1; --body-color: #000; --btn-color: #212121; --btn-bg: #fff; --btn-hover-color: #a63ec5; --btn-hover-bg: #ddd; } html[data-theme="summer"] { --body-bg: lightblue; --body-color: #000; --btn-color: darkgreen; --btn-bg: lightyellow; --btn-hover-color: #1d4116; --btn-hover-bg: #f1f1f1; } html[data-theme="winter"] { --body-bg: #333; --body-color: #fff; --btn-color: #f1f1f1; --btn-bg: #212121; --btn-hover-color: lightblue; --btn-hover-bg: #555; } html { color: var(--body-color); background-color: var(--body-bg); }.main-nav-list { list-style: none; display: flex; align-items: center; /* padding-right: 5rem; */ /* font-size: x-large; */ }.main-nav-link { text-decoration: none; display: inline-block; color: var(--btn-color); background-color: var(--btn-bg); padding: .25rem 1rem; border-radius: 5px; font-weight: 500; /* font size 1.8 */ font-size: 2.5rem; transition: all 0.3s; }.main-nav-list li:not(:last-child) { margin-right: 1.5rem; }.main-nav-link:hover, .main-nav-link:active { color: var(--btn-hover-color); background-color: var(--btn-hover-bg); }

 <br> <strong>Choose your theme:</strong> <select id="mySelect" onchange="toggleTheme(this.value)"> <option value="default">Default</option> <option value="summer">Summer</option> <option value="winter">Winter</option> </select> <br><hr><br> <header class="header"> <a href="#"> <img class="logo" alt="logo" src="img/logo.png" /> </a> <nav class="main-nav" id="main-nav"> <ul class="main-nav-list"> <li> <a class="main-nav-link" href="#introduction">Intro</a> </li> <li> <a class="main-nav-link" href="#portfolio">Projects</a> </li> <li> <a class="main-nav-link" href="#contact">Hello</a> </li> <!-- <li><a class="main-nav-link" href="#">section4</a></li> --> </ul> </nav> </header>