使用 javascript 为所有 div 元素添加"onmouseover"功能

Question

<p class="glow" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Hello</p>
<p class="glow" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Hey</p>

这是我当前的设置。我正在尝试使用鼠标悬停和鼠标移出事件来更改这两条线的颜色。

不幸的是，我需要为类的所有行都这样做"辉光；这意味着我必须为每"1"拷贝CCD_ 1行；辉光；要素

有没有一种使用javascript更简单的方法可以做到这一点？(我不想直接使用css悬停类来更改颜色(

Answer 1

尝试使用querySelectorAll方法。

querySelectorAll将以具有指定选择器(下面示例中的类选择器(的数组形式返回节点列表。您可以循环浏览这些节点并添加onmouseover和onmouseout事件。

document.querySelectorAll('.glow').forEach((node) => {
node.onmouseover = mouseOver;
node.onmouseout = mouseOut;
})

Answer 2

当然，您可以从javascript代码访问DOM，而不是通过其他方式访问。

const glowEls = document.querySelectorAll(".glow")
glowEls.forEach((element) => {
// call your mouseOver function from here
})

请确保在DOM初始化后调用此代码，否则将找不到您的元素。

为了确保它在DOM初始化之后加载；推迟"；或者把你的脚本标签放在你的身体底部。

顺便说一句，通常倾向于从javascript访问DOM，而不是从DOM调用javascript。通过这种方式，您的html更加干净，并保持其单一目的。