查找调用JavaScript函数的HTML元素的ID

Question

我有一个三按钮导航面板,包括三个div和一个锚.鼠标悬停时,myFunction()会为三个div和anchor标记指定一个类,以便进行样式设置.

<nav>
    <div id="btn1" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>

    <div id="btn3" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
   </div>

    <div id="btn2" class="button"  onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>
</nav>

我需要做的是找到调用myFunction()的div的ID,这样我就可以在函数内只对调用div进行更改,而不是全部三个.

仅使用JavaScript,我该怎么做呢.

提前致谢.

Answer 1

你有两种方法可以做

1)使用div的名称向方法发送参数

例

<div id="btn1" class="button" onMouseOver="myFunction('btn1')">

2)发送元素

例

<div id="btn1" class="button" onMouseOver="myFunction(this)">

然后在javascript中你可以做

myFunction(element) {
    //element is now the element you clicked on
}