堆栈内存溢出
  简体   繁体   English

JS在Firefox中无法使用，在IE和Chrome中可以使用

[英]JS not working in Firefox, works in IE and Chrome

 原文  2013-09-22 05:17:25  6   1    javascript/ firefox

问题描述

Was wondering if anyone could provide some insight as to why this js does not work in Firefox but works perfectly and as intended under IE and Chrome? 想知道是否有人可以提供一些见解，以了解为什么此js在Firefox中无法正常运行，但在IE和Chrome下可以正常运行？

It changes the color of a lot of divs when hovering over some buttons at the top of the page. 将鼠标悬停在页面顶部的某些按钮上时，它会更改许多div的颜色。

Can be seen on my site: ptable.info 可以在我的网站上看到：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;
    }
}

1 个解决方案

解决方案1
 1 已采纳  2013-09-22 05:57:50

You have to use either style.backgroundColor or style['backgroundColor'] to set the background-color. 您必须使用style.backgroundColor或style['backgroundColor']设置背景色。 Either of these methods should work across browsers. 这些方法中的任何一种都可以在浏览器中使用。 I have tested in FireFox 23, Opera 15, Chrome 31 (Dev Build) and IE10. 我已经在FireFox 23，Opera 15，Chrome 31（开发版）和IE10中进行了测试。

You can refer here for a sample fiddle. 您可以在这里参考样本小提琴。 The fiddle has three div with id as aa , bb and cc respectively. 小提琴有三个div ，其id为aa ， bb和cc 。

When you do mouseover and mouseout , you will find that it affects all three div in Chrome, IE10 and Opera. 当您进行mouseover和mouseout ，您会发现它会影响Chrome，IE10和Opera中的所有三个div 。 But in FireFox, it affects only the first and third div because the second div uses style['background-color'] and is not recognized by FireFox. 但是在FireFox中，它仅影响第一和第三div因为第二div使用style['background-color']且FireFox无法识别。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Js可在IE，Chrome和Firefox中使用 - Js works in IE, Chrome but not Firefox JS适用于Chrome，但不适用于Firefox或IE - JS working in Chrome but not Firefox or IE .js 文件适用于 chrome 和 firefox 但不适用于 IE - .js file works in chrome and firefox but not IE JS可以在IE，Safari，Chrome中运行，但不能在Firefox中运行？ - JS works in IE, Safari, Chrome but not in Firefox? JS在Firefox中有效，但无法在chrome和IE中加载 - JS Works in Firefox but not loading in chrome and IE 选项卡式内容在Chrome和Firefox中不起作用，但在IE中可用 - tabbed content not working in Chrome and Firefox but works in IE JavaScript函数不适用于Chrome和IE，但适用于FireFox - JavaScript function not working on Chrome & IE but works on FireFox 验证不适用于Firefox，但适用于IE，Chrome - validation not working in Firefox but works in IE,Chrome JavaScript无法在IE和Firefox中运行，在Chrome中运行良好 - JavaScript not working in IE and Firefox, works fine in Chrome JavaScript 在 Firefox、Chrome 中不起作用 - 在 IE、Edge 中有效 - JavaScript not working in Firefox, Chrome - works in IE, Edge
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM