0

想知道是否有人可以提供一些关于为什么这个 js 不能在 Firefox 中运行但在 IE 和 Chrome 下完美运行的见解？

当将鼠标悬停在页面顶部的某些按钮上时，它会更改许多 div 的颜色。

可以在我的网站上看到：ptable.info

window.onload=function(){
var noblegasesColl = document.getElementsByClassName('noblegases');
var halogensColl = document.getElementsByClassName('halogens');
var othernonmetalsColl = document.getElementsByClassName('othernonmetals');
var transitionmetalsColl = document.getElementsByClassName('transitionmetals');
var metalloidsColl = document.getElementsByClassName('metalloids');
var posttransitionColl = document.getElementsByClassName('posttransition');
var alkalineColl = document.getElementsByClassName('alkaline');
var alkaliColl = document.getElementsByClassName('alkali');
var actinoidsColl = document.getElementsByClassName('actinoids');
var lanthanoidsColl = document.getElementsByClassName('lanthanoids');

//Noble Gases
document.getElementById('noblegasesButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('noblegasesButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(actinoidsColl, '#f4a460');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Halogens
document.getElementById('halogensButton').addEventListener('mouseover', function(){
    changeColor(noblegasesColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('halogensButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Non-metals
document.getElementById('nonmetalsButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');                    
});

document.getElementById('nonmetalsButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Transition metals
document.getElementById('transitionmetalsButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');        
});

document.getElementById('transitionmetalsButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Post-transition
document.getElementById('posttransitionButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('posttransitionButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Metalloids
document.getElementById('metalloidsButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('metalloidsButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Alkaline
document.getElementById('alkalineButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('alkalineButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Alkali
document.getElementById('alkaliButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('alkaliButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Lanthanoids
document.getElementById('lanthanoidsButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(actinoidsColl, '#696969');
    changeColor(noblegasesColl, '#696969');
});

document.getElementById('lanthanoidsButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});
//Actinoids
document.getElementById('actinoidsButton').addEventListener('mouseover', function(){
    changeColor(halogensColl, '#696969');
    changeColor(othernonmetalsColl, '#696969');
    changeColor(transitionmetalsColl, '#696969');
    changeColor(metalloidsColl, '#696969');
    changeColor(posttransitionColl, '#696969');
    changeColor(alkalineColl, '#696969');
    changeColor(alkaliColl, '#696969');
    changeColor(noblegasesColl, '#696969');
    changeColor(lanthanoidsColl, '#696969');
});

document.getElementById('actinoidsButton').addEventListener('mouseout', function(){
    changeColor(halogensColl, '#00FFFF');
    changeColor(othernonmetalsColl, '#7CFC00');
    changeColor(transitionmetalsColl, '#ff78bb');
    changeColor(metalloidsColl, '#7A378B');
    changeColor(posttransitionColl, '#8FBC8F');
    changeColor(alkalineColl, '#e5e500');
    changeColor(alkaliColl, '#FF6600');
    changeColor(noblegasesColl, '#3399CC');
    changeColor(lanthanoidsColl, '#CC1100');
    changeColor(actinoidsColl, '#f4a460');
});

}

function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}
4

1 回答 1

1

您必须使用style.backgroundColor或style['backgroundColor']设置背景颜色。这些方法中的任何一个都应该跨浏览器工作。我已经在 FireFox 23、Opera 15、Chrome 31（Dev Build）和 IE10 中进行了测试。

您可以在此处参考示例小提琴。小提琴有三个divas id，aa和bb分别cc。

当您执行mouseoverandmouseout时，您会发现它会影响divChrome、IE10 和 Opera 中的所有三个。但是在 FireFox 中，它只影响第一个和第三个div，因为第二个div使用style['background-color']并且不被 FireFox 识别。

于 2013-09-22T05:57:50.847 回答