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'])"