javascript - html Javascript 通过 onmouseover 在 按钮上 move 图像

Question

我是一个愚蠢的网站创建者，我在 JavaScript 方面遇到了一些问题。我在互联网上找到了一个功能，现在我将它与更多东西结合起来。但这根本不起作用。我对 javascript 没有太多经验。

Javascript 文件:

function getOff(){z = this.ElementId;
 x = document.getElementById('button_shadow' + z);
 return x.offsetLeft;}

function move_right(value){var y = getOff();
 x.style.left = y + value;}

html:

<img src="img/button_shadow.png" class="button_shadow" style="top: 218px; left: 5px;" id="button_shadow1">
<img src="img/button_shadow.png" class="button_shadow" style="top: 259px; left: 5px;" id="button_shadow2">

<script src="js/button_shadow_move.js"></script>
<a class="tlacitko_bok" style="top: 0px;" href="o_klubu.html" id="1" onmouseover="getOff(); move_right(5);">O klubu</a>
<a class="tlacitko_bok" style="top: 41px;" href="fotogalerie.html" id="2" onmouseover="getOff(); move_right(5);">Fotogalerie</a>

CSS:

a.tlacitko_bok:hover{margin-left: 5px;}

谢谢。

Answer 1

您可以简化和改进您的代码。您只能保留这一项功能:

function move_right(obj, value) {
    var x = document.getElementById('button_shadow' + obj.id);
    x.style.left = x.offsetLeft + value + 'px';
}

并在 HTML 中使用它，如下所示:

<a id="1" onmouseover="move_right(this, 5);" ...>O klubu</a>

演示:http://jsfiddle.net/efu8n/

你的错误:你应该使用id属性，而不是ElementId。如果您像这样调用它们，那么函数内部的上下文将是 Window，而不是您与之交互的目标元素。因此，您只需传递引用对象 this 即可用于检索 id。