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>

请告诉我为什么此代码不适用于我的身份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'])"

Answer 2

函数属性中的

必须是var not string，并且必须调用此var 例如

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

}

Answer 3

试试这个......

<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边界border-style:ridge进行测试...
**为您的标签创建ID。

这个JS脚本

  function changeDiv(IDS){
      document.getElementById(IDS).style.width="230px";
      document.getElementById(IDS).style.height="162px";
      document.getElementById(IDS).style.top="0px";
  }

JS和HTML不正确

3 个答案: