时间戳

首页 > 解决方案 > 滚动时更改链接颜色

javascript - 滚动时更改链接颜色

问题描述

我有这个菜单：

<div id = "menu" > 


    <a href = "index.html"> <img src = "images/logo.png" style = "padding-left: 5%; padding-top: 1%;"> </a>

    <ul id = "lista">
    <li style = "display: inline-block;"> <a href = "aboutus.html"> <padding left> SOBRE O INSTITUTO </a></li>
        <li style = "display: inline-block;"> <a href = "pessoas.html"> PESSOAS</a> </li>
        <li style = "display: inline-block;"> <a href = "universidadefour.html"> UNIVERSIDADE FOUR </a> 
            <ul>
                 <a href = "programaprolider.html"> <li> PROGRAMA PROLÍDER </li> </a> 
                 <a href = "universidadefour.html#escolapolitica"> <li> ESCOLA DE POLÍTICA </li> </a> 
                 <a href = "universidadefour.html#escolaempreendedorismo"> <li> ESCOLA DE EMPREENDEDORISMO </li> </a> 
            </ul> </li>
        <li style = "display: inline-block;"> <a href = "comunidadefour.html"> <padding left> COMUNIDADE FOUR </a>
            <ul>
                 <a href = "comunidadefour.html"> <li> A COMUNIDADE FOUR</li> </a>
                 <a href = "comunidade.html"> <li> FELLOWS </li> </a>
            </ul>
        </li>
        <li style = "display: inline-block;"> <a href = "foursummit.html"> FOUR SUMMIT </a> </li>
        <li style = "display: inline-block;"> <a href = "trabalheconosco.html"> VAGAS ABERTAS</a> </li>
        <li style = "display: inline-block;"> <a href = "en-index.html"> EN </a> <span style = "color: white;"> |</span> <a href = "index.html"> BR </a> </li>
    </ul>
</div>

这些是链接颜色的 CSS 规范：

#menu ul li a{
    text-decoration: none;
    line-height: 70px;
    font-size: 14px;
    padding: 4px 15px 4px 15px;
    color: white;
}

此菜单没有任何指定的背景颜色。但是，在用户滚动页面后，它会发生变化：

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

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("menu").style.backgroundColor = "#fff";
  } else {
    document.getElementById("menu").style.backgroundColor = "";
  }
}

我想用这个菜单的链接颜色做同样的事情。我该怎么做，将链接颜色从白色更改为#333333？

谢谢！

标签： javascripthtml

解决方案

用于document.querySelectorAll()选择具有指定选择器的元素。学到更多

在你的函数内部，在if(){}块内部，

var links = document.querySelectorAll("#lista a"); // selects all <a> inside #lista
links.forEach((link)=>link.style.color = "#333333"); // loop through each link and change the color

推荐阅读