堆棧內存溢出
  簡體   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

問題描述

想知道是否有人可以提供一些見解，以了解為什么此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;
    }
}

1 個解決方案

解決方案1
 1 已采納  2013-09-22 05:57:50

您必須使用style.backgroundColor或style['backgroundColor']設置背景色。 這些方法中的任何一種都可以在瀏覽器中使用。 我已經在FireFox 23，Opera 15，Chrome 31（開發版）和IE10中進行了測試。

您可以在這里參考樣本小提琴。 小提琴有三個div ，其id為aa ， bb和cc 。

當您進行mouseover和mouseout ，您會發現它會影響Chrome，IE10和Opera中的所有三個div 。 但是在FireFox中，它僅影響第一和第三div因為第二div使用style['background-color']且FireFox無法識別。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Js可在IE，Chrome和Firefox中使用 JS適用於Chrome，但不適用於Firefox或IE .js 文件適用於 chrome 和 firefox 但不適用於 IE JS可以在IE，Safari，Chrome中運行，但不能在Firefox中運行？ JS在Firefox中有效，但無法在chrome和IE中加載 選項卡式內容在Chrome和Firefox中不起作用，但在IE中可用 JavaScript函數不適用於Chrome和IE，但適用於FireFox 驗證不適用於Firefox，但適用於IE，Chrome JavaScript無法在IE和Firefox中運行，在Chrome中運行良好 JavaScript 在 Firefox、Chrome 中不起作用 - 在 IE、Edge 中有效
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM