在JavaScript中实现mouseover函数

我正试图学习如何使用JavaScript编程，这来自于Java、HTML和CSS的扎实知识。我用bootstrap设计了一个网站，但我已经被卡住了。我的目标是使用普通JavaScript更改navbar元素的背景色

我可以使用jQuery来实现这一点，但我需要知道如何使用JavaScript编程，因为这是一项很有帮助的技能。经过研究，我看到的实现是HTML元素的mouseover属性和getElementsByClassName/getElementsById

当我自己实现它们时，我似乎一点运气都没有。我想将JavaScript保存在一个外部文件中，这是另一个困难。我似乎无法一次选择所有元素，更不用说设计它们了

以下是我的html（使用Bootstrap4和一些自定义样式）：

---

将颜色设置为蓝色只是测试选择是否有效，而不是我的最终目标。当我刷新页面时，什么都没有发生。我已经确认我正确链接了我的JS文件，因为alert（）可以正常工作。

你就快到了。。。您拥有的是一个集合，可以循环浏览

var N=document.getElementsByClassName("nav-link");

for(var i=0; i<N.length; i++){ N[i].style.color = "blue"; }

var N=document.getElementsByClassName（“导航链接”）；
对于（var i=0；i您需要在元素数组上循环


var links=document.getElementsByClassName（'nav-link'）；
对于（变量i=0；i


标题
和关于标题的子文本








我个人更喜欢
.querySelectorAll（'selector'）
，因为它允许更灵活地选择元素。

循环它们的方法（可选）是
[].map.call（集合、函数）

它灵活、不太冗长、可读性强，因此是可维护的。我不确定它在向后浏览器兼容性方面有多大进展，但它确实涵盖了现代IE，而推荐的方法，
NodeList.forEach（）
还没有


[].map.call（document.queryselectoral（'.nav link'），函数（el）{
el.addEventListener（'mouseover'，function（）{
el.setAttribute（'data-color'，el.style.color）；
el.style.color='red'
});
el.addEventListener（'mouseout'，function（）{
el.style.color=el.getAttribute（'data-color'）；
el.removeAttribute（'data-color'））
});
})




清理@user4723924解决方案，并提供在鼠标离开控件时重新更改颜色的方法


//获取所有导航链接元素。
var navButtons=document.getElementsByClassName（“导航链接”）；
对于（var i=0；i










getElementsByClassName
返回一个列表，而不是单个元素。您需要迭代元素并添加一个
mouseover
事件侦听器.JS文件链接。未发布。
element.getElementsByClassName（）
为您提供一个类似数组的对象。它类似于
document.getElementsByClassName（'nav-link'）[0].style.color='blue'；
用于第一个类似数组的对象元素。id属性应该是唯一的。您不应该为不同的元素设置相同的id值。而且您不需要javascript，这可以通过css轻松完成。循环通过
querySelectorAll
的
节点列表的方法是。@AuxTaco internetex普洛尔：。这就是transpilers和polyfills的用途。@AuxTaco，我不是JavaScript专家。出于需要，我通过实践学会了它。你能告诉我使用
[].map.call（）的陷阱/缺点吗
？如果有，请给我一个有用的链接。谢谢。我们现在正在讨论意见，所以我会留下它，但我确实想提醒其他人。回答得很好，谢谢！我没有考虑过它是一个集合。如果可以，我会向上投票，但不够高。这种方法有一个小问题，如果链接使用内联样式着色，那么ch实际上不应该这样，鼠标移出时内联样式将丢失。您可以使用数据属性存储原始颜色：
document.getElementsByClassName("nav-link").style.color = "blue";

var N=document.getElementsByClassName("nav-link");

for(var i=0; i<N.length; i++){ N[i].style.color = "blue"; }