0

我对特定的 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？

4

3 回答 3

7

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

尝试将您的功能修改为以下内容：

<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 中查找 3 次了：

<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'])"
于 2012-12-24T08:48:09.117 回答
0

in function 属性必须是 var 而不是 string，例如，您必须调用此 var

function myfunc(d){ //d is varble
alert(d);

}

于 2012-12-24T08:49:14.507 回答
0

尝试这个...

<a  href="#" >
    <div id='image_1' onmouseover="changeDiv('image_1')" onmouseout="defaultDiv('image_1')" style="width:100px; height:18px; border-style:ridge;">
    Home
    </div>
</a>

如果您只想要鼠标悬停时的指针。**为测试
添加 DIV 边框... ** 为您的标签创建 ID。border-style:ridge

这个 JS 脚本

  function changeDiv(IDS){
      document.getElementById(IDS).style.width="230px";
      document.getElementById(IDS).style.height="162px";
      document.getElementById(IDS).style.top="0px";
  }
于 2012-12-24T12:29:52.657 回答