使用 javascript 更改背景颜色答案

【问题标题】：changing backgroundColor using javascript使用 javascript 更改背景颜色
【发布时间】：2012-02-09 09:51:21
【问题描述】：

此脚本在除 IE 之外的所有其他浏览器中都能正常工作：

nav.addEventListener('mouseover',function(e) {
        switch(e.target.id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
    },false);

在 IE 中，悬停时背景颜色不会改变。

有什么想法吗？

【问题讨论】：

如果可能的话，我推荐使用 jQuery。它会为您解决此类问题，使其在包括 IE 在内的大多数浏览器中都能正常工作。
可能有帮助：stackoverflow.com/questions/1695376/…

标签： php javascript html css internet-explorer

【解决方案1】：

在 IE 中你必须使用attachEvent 而不是标准的addEventListener。并在 IE 中使用 srcElement 而不是 target。

试试这个。

function mouseOverHandler(e) {
        switch((e.target || e.srcElement).id) {
            case 'aGallery':
            navOpacity.style.backgroundColor = "red";
            break;
            case 'aContact':
            navOpacity.style.backgroundColor = "green";
            break;
            case 'aAbout':
            navOpacity.style.backgroundColor = "yellow";
            break;
            case 'aHome':
            navOpacity.style.backgroundColor = "#CC33CC";
            break;
        }
}

if (el.addEventListener){
  el.addEventListener('mouseover', mouseOverHandler, false); 
} 
else if (el.attachEvent){
  el.attachEvent('onmouseover', mouseOverHandler);
}

【讨论】：

有一天，我们应该聚在一起，组成某种委员会来制定浏览器标准！并且所有浏览器都可以关注它们！

【解决方案2】：

IE 对事件使用“on”版本，onclick、onmouseover 行。应该是你的问题。

另外，IE（9 版之前）不支持addEventListener。您必须使用attachEvent。

将此代码视为起点：

if (el.addEventListener){
  el.addEventListener('click', myFunc);
} else if (el.attachEvent){
  el.attachEvent('onclick', myFunc);
}

【讨论】：

另一个问题是IE使用event.srcElement而不是W3C标准的target属性。