如何用JS修改导航栏#navbar a、a:hover、a.active的字体与内边距

看起来你现在的问题是JS代码只修改了导航栏容器的样式，没针对内部的<a>标签单独设置样式，而且代码里还有个小错误（getElementsByClassName("a")是找class为a的元素，不是<a>标签）。下面给你两种可行的方案，优先推荐第一种用CSS类的方式，更易维护：

方案1：用CSS类切换（推荐） #

这种方式把样式都放在CSS里，JS只负责添加/移除类，还能轻松控制hover和active状态的样式变化：

第一步：添加CSS样式 #

/* 默认导航栏样式 */
#navbar {
  transition: all 0.3s ease; /* 平滑过渡动画 */
  padding: 30px 0;
  font-size: 30px;
}

#navbar a {
  transition: all 0.3s ease;
  padding-bottom: 5px;
  color: #333;
  text-decoration: none; /* 可选：去掉下划线 */
}

#navbar a:hover {
  color: #007bff; /* 默认hover颜色 */
}

#navbar a.active {
  border-bottom: 2px solid #007bff; /* 默认active下划线 */
}

/* 滚动后的导航栏样式 */
#navbar.scrolled {
  padding: 0 0;
  font-size: 20px;
}

#navbar.scrolled a {
  padding-bottom: 2px;
  color: #666;
}

#navbar.scrolled a:hover {
  color: #0056b3; /* 滚动后的hover颜色 */
}

#navbar.scrolled a.active {
  border-bottom-width: 1px; /* 滚动后的active下划线变细 */
}

第二步：修改JS代码 #

window.onscroll = function() { scrollFunction() };

function scrollFunction() {
  const navbar = document.getElementById("navbar");
  // 判断滚动距离，添加或移除scrolled类
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled");
  }
}

这种方法的好处是：

• 样式和逻辑分离，更容易维护
• 能直接控制hover和active的样式变化（JS无法直接修改hover状态）
• 过渡动画更流畅

方案2：直接用JS修改每个链接的样式 #

如果你不想用CSS类，也可以直接遍历所有<a>标签修改样式：

window.onscroll = function() { scrollFunction() };

function scrollFunction() {
  const navbar = document.getElementById("navbar");
  const navLinks = navbar.getElementsByTagName("a"); // 获取导航栏内所有a标签
  
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    // 修改导航栏容器样式
    navbar.style.padding = "0px 0px";
    navbar.style.fontSize = "20px";
    
    // 遍历修改每个a标签的样式
    for (let link of navLinks) {
      link.style.paddingBottom = "2px";
      link.style.color = "#666";
      // 可以添加更多样式，比如borderBottom等
    }
  } else {
    // 恢复导航栏容器样式
    navbar.style.padding = "30px 0px";
    navbar.style.fontSize = "30px";
    
    // 恢复每个a标签的样式
    for (let link of navLinks) {
      link.style.paddingBottom = "5px";
      link.style.color = "#333";
      // 恢复其他样式
    }
  }
}

注意：这种方法没法直接修改hover状态的样式，所以还是推荐方案1哦。

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