Javascript 使用JS更改字体大小和填充的导航工具栏HTML

我正试图使我的第一个网站与HTML只是为了好玩。 我已经设法使顶部的导航栏通过滚动缩小。 我现在很难对#navbar a中的特定项目进行更改

导航栏a：悬停并#导航栏a.激活。 脚本不改变整个id=“navbar”的代码是什么

window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
如果（document.body.scrollTop>80 | | document.documentElement.scrollTop>80）{
document.getElementById（“navbar”）.style.padding=“0px 0px”；
document.getElementById（“navbar”）.style.fontSize=“20px”；
}否则{
document.getElementById（“navbar”）.style.padding=“30px 0px”；
document.getElementById（“navbar”）.style.fontSize=“30px”；
document.getElementById（“navbar”）.getElementsByClassName（“a”）.style.paddingBottom=“100px”
}
}

完成大量CSS更改的最简单方法是向对其进行分组的元素添加一个类，就像向nav添加一个

.active

类一样。下面是将80px从红色滚动到黄色后如何更改所有

a

元素颜色的最简单示例：

window.addEventListener（'scroll'，event=>{
（document.documentElement.scrollTop | | document.body.scrollTop）>80
？document.querySelector（'nav'）.classList.add（'active'））
：document.querySelector（'nav'）.classList.remove（'active'））
});
nav{位置：固定；顶部：0；左侧：0；}
导航a{颜色：红色；}
nav.active a{颜色：黄色；}
主{高度：200vh；}
完成大量CSS更改的最简单方法是向对其进行分组的元素添加一个类，就像向nav添加一个
.active
类一样。下面是将80px从红色滚动到黄色后如何更改所有
a
元素颜色的最简单示例：


window.addEventListener（'scroll'，event=>{
（document.documentElement.scrollTop | | document.body.scrollTop）>80
？document.querySelector（'nav'）.classList.add（'active'））
：document.querySelector（'nav'）.classList.remove（'active'））
});
nav{位置：固定；顶部：0；左侧：0；}
导航a{颜色：红色；}
nav.active a{颜色：黄色；}
主{高度：200vh；}
您的代码在

豆豆
关于豆豆
豆豆太棒了！她是有史以来最美味的东西

比尼·比恩和她的朋友们

豆豆的特性
可爱的
好笑
聪明的
好吃
比尼·比恩的朋友们
她有一些很棒的朋友





这个网站是为了好玩而创建的&复制豆子

您的代码在

豆豆
关于豆豆
豆豆太棒了！她是有史以来最美味的东西

比尼·比恩和她的朋友们

豆豆的特性
可爱的
好笑
聪明的
好吃
比尼·比恩的朋友们
她有一些很棒的朋友





这个网站是为了好玩而创建的&复制豆子

要选择
a
标记，可以使用
querySelectorAll
。您还可以将
#navbar
存储为变量，并使用三元运算符使函数更易于管理。尽管其他人已经提到，添加/删除CSS类是目前为止最可取的解决方案

let navbar = document.getElementById('navbar');
let links = navbar.querySelectorAll('a');

function scrollFunction() {
  let is_scrolled = (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80);

  navbar.style.padding = is_scrolled ? "0" : "30px 0";
  navbar.style.fontSize = is_scrolled ? "20px" : "30px";

  for(let link of links) {
    link.style.paddingBottom = is_scrolled ? "100px" : "0";
  }
}

编辑：为了澄清，这明确地回答了您的问题，尽管提供的其他答案比您正在使用的答案更好。如果要添加/删除批处理样式，应尽可能使用CSS和添加/删除类

例如（使用带有第二个布尔输入的
classList.toggle
）：

JavaScript:

function scrollFunction() {
  let is_scrolled = (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80);

  navbar.classList.toggle('my-scrolled-class', is_scrolled);
}

CSS:

#导航栏{
字体大小：20px；
填充：0；
}
#导航栏a{
填充底部：100px；
}
#navbar.my-scrolled-class{
字体大小：30px；
填充：30px0；
}
#navbar.my-scrolled-class a{
填充底部：0；
}
要选择
a
标记，可以使用
querySelectorAll
。您还可以将
#navbar
存储为变量，并使用三元运算符使函数更易于管理。尽管其他人已经提到，添加/删除CSS类是目前为止最可取的解决方案

let navbar = document.getElementById('navbar');
let links = navbar.querySelectorAll('a');

function scrollFunction() {
  let is_scrolled = (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80);

  navbar.style.padding = is_scrolled ? "0" : "30px 0";
  navbar.style.fontSize = is_scrolled ? "20px" : "30px";

  for(let link of links) {
    link.style.paddingBottom = is_scrolled ? "100px" : "0";
  }
}

编辑：为了澄清，这明确地回答了您的问题，尽管提供的其他答案比您正在使用的答案更好。如果要添加/删除批处理样式，应尽可能使用CSS和添加/删除类

例如（使用带有第二个布尔输入的
classList.toggle
）：

JavaScript:

function scrollFunction() {
  let is_scrolled = (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80);

  navbar.classList.toggle('my-scrolled-class', is_scrolled);
}

CSS:

#导航栏{
字体大小：20px；
填充：0；
}
#导航栏a{
填充底部：100px；
}
#navbar.my-scrolled-class{
字体大小：30px；
填充：30px0；
}
#navbar.my-scrolled-class a{
填充底部：0；
}
您的意思是当用户单击选项卡时更改颜色吗？只需从当前包含
.active
类的元素中删除该类，并将其添加到单击的元素中即可。否。我有一个导航栏，当你滚动时它会缩小。当它是全尺寸时，#导航栏a的绿色背景是错误的。我想改变这一点，就像我对一般填充和字体所做的那样