如何为单个元素设置CSS变量属性，重置其余元素对应属性？

要实现点击按钮时仅当前对应元素保留高亮样式，其他元素重置，只需修改JavaScript逻辑，每次点击时先重置之前激活元素的CSS变量，再设置当前元素的变量即可。

修改后的完整代码 #

HTML（无需改动）

<nav id="nav">
  <ul id="list-nav">
    <li class="nav-list-inside"><button class="nav-button">Name</button></li>
    <li class="nav-list-inside"><button class="nav-button">Home</button></li>
    <li class="nav-list-inside"><button class="nav-button">Services</button></li>
    <li class="nav-list-inside"><button class="nav-button">About us</button></li>
    <li class="nav-list-inside"><button class="nav-button">Contact us</button></li>
  </ul>
</nav>

CSS（无需改动）

#nav {
  position: fixed;
  width: 100%;
}

#list-nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 75px;
  position: relative;
  padding-top: 10px;
  gap: 10px;
}

.nav-list-inside {
  --left: 50%;
  --width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  font-size: 2rem;
  position: relative;
  width: 100%;
  height: 100%;
}

.nav-list-inside:after {
  content: "";
  width: var(--width);
  height: 3px;
  background: var(--neon-blue);
  position: absolute;
  left: var(--left);
  bottom: -10px;
  transition: 0.5s;
}

.nav-button {
  display: inline-block;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 2rem;
  padding: 0 10px;
  margin: 0 20px;
  position: relative;
  color: white;
  border: none;
  background: none;
  cursor: pointer;
}

JavaScript（核心修改）

const navButtons = document.querySelectorAll('.nav-button');
let activeNavItem = null;

navButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 重置之前激活的导航项样式
    if (activeNavItem) {
      activeNavItem.style.setProperty('--width', '0');
      activeNavItem.style.setProperty('--left', '50%');
    }
    
    // 获取当前点击按钮对应的父元素.nav-list-inside
    const currentItem = button.parentElement;
    // 设置当前导航项的高亮样式
    currentItem.style.setProperty('--width', '70%');
    currentItem.style.setProperty('--left', '17.5%');
    
    // 更新激活状态的导航项
    activeNavItem = currentItem;
    
    // 执行原有的scroll函数（根据按钮索引）
    const buttonIndex = Array.from(navButtons).indexOf(button);
    scroll(buttonIndex);
  });
});

逻辑说明 #

1. 状态记录：用activeNavItem变量保存当前激活的.nav-list-inside元素，避免每次遍历所有元素，提升性能。
2. 重置样式：每次点击新按钮时，先检查是否有已激活的元素，若有则重置其CSS变量到默认值。
3. 绑定当前元素：通过button.parentElement直接获取按钮对应的父级.nav-list-inside，无需依赖索引匹配，代码更鲁棒。
4. 更新激活状态：将当前元素设为新的激活状态，确保下次点击时能正确重置。

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