javascript - JS 和 HTML 不正确

Question

我对特定 div 元素及其 id 有疑问。我想添加悬停链接样式，但如何做到这一点？我不太明白。我的例子:

<a href="#" onmouseover="changeDiv('image_1')" onmouseout="defaultDiv('image_1')">Home</a>

以及处理添加样式的脚本:

<script>
  function changeDiv('image_1'){
    document.getElementById('image_1').style.width="230px";
    document.getElementById('image_1').style.height="162px";
    document.getElementById('image_1').style.top="0px";
  }
</script>

告诉我为什么此代码不适用于我的 ID image_1？

Answer 1

问题是你指定了字符串文字而不是变量作为函数的参数，这会导致语法错误。

尝试将您的函数修改为如下所示:

<script>
function changeDiv(id){
  document.getElementById(id).style.width="230px";
  document.getElementById(id).style.height="162px";
  document.getElementById(id).style.top="0px";
}
</script>

现在您可以在调用函数时将任何您想要的 id 传递给该函数。

缓存对元素的引用以提高性能:

为了提高性能，您还可以将元素缓存在变量中，这样您就不必在 DOM 中查找它三次:

<script>
function changeDiv(id){
  var elm = document.getElementById(id);
  elm.style.width="230px";
  elm.style.height="162px";
  elm.style.top="0px";
}
</script>

同时修改多个元素:

要同时修改多个元素，可以使用不同的参数多次调用该函数:

onmouseover="changeDiv('image_1'); changeDiv('image_2');"

或者您可以更改该函数以获取带有元素 ID 的字符串数组。

<script>
function changeDivs(ids){
  for(var i = 0, len = ids.length; i < len; i++) {
     var elm = document.getElementById(ids[i]);
     elm.style.width="230px";
     elm.style.height="162px";
     elm.style.top="0px";
  }
}
</script>

然后您可以像这样调用它:

onmouseover="changeDivs(['image_1', 'image_2'])"