Question

我想将div背景颜色更改为绿色onmouseover事件，但我不确定为什么我一直收到此错误 TypeError：无法读取未定义的属性'style'

这是我的JS代码：

// JavaScript文档

s1= new String()
var myArray = new Array();
var div_id=0;

myArray[0] = "Donald Duck";
myArray[1] = "Winnie Pooh";
myArray[2] = "Komal Waseem";
myArray[3] = "Hockey";
myArray[4] = "Basketball";
myArray[5] = "Shooting";
myArray[6] = "Mickey Mouse";


function test(){
s1 = document.getElementById('filter').value;
var myRegex = new RegExp((s1),"ig");
arraysearch(myRegex);
}



function arraysearch(myRegex){ 
var flag=0;

for(b=1; b<=div_id; b++)
    {
   var d = document.getElementById('lc');
   var olddiv= document.getElementById("div" + b);
   if(olddiv){
   d.removeChild(olddiv);}
   }

for(i=0; i<myArray.length; i++)
{ 
if (myArray[i].match(myRegex)){ 
      div_id++;
      flag=1;
      document.getElementById('lc').style.visibility='visible';
      var element = document.createElement("div");
      element.setAttribute('id', "div" + div_id);
      element.appendChild(document.createTextNode(myArray[i]));
      document.getElementById('lc').appendChild(element);

      var x =document.getElementsByTagName("div")
      for(t=0; t<x.length; t++)
      {
      //alert(t);
      if(x[t]){
      x[t].onmouseover = function(){
      x[t].style.backgroundColor='green';
       }
       }
}
}
    if (flag ==0){
    document.getElementById('lc').style.visibility='hidden'; }
}

    }

Answer 1

您可以更改JavaScript，这应该有效：

x[t].onmouseover = function() {
   this.style.backgroundColor='green';
}

原始JavaScript不起作用的原因是因为鼠标悬停时t已更改，因此事件处理程序中的x[t]无效。

或者您可以使用CSS：

div.myDiv:hover {
    background-color: green;
}

Answer 2

如果您希望div绿色转移，例如：div id是mydiv，您可以在css中执行类似的操作。

 #mydiv{
     background-color:red;
}

#mydiv:hover{
    background-color:green;
}

在鼠标悬停时动态更改DIV颜色

2 个答案: