[英]JS not working in Firefox, works in IE and Chrome
想知道是否有人可以提供一些见解,以了解为什么此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;
}
}
您必须使用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.