如何使用 javascript 在 FF 中切换 div 的可见性？ （IE 和 Chrome 工作正常）

Question

So, I'm trying to toggle the visibility of a div layer using javascript and this is what it looks like:

document.all["layer1"].style.visibility='visible';

and

document.all["layer1"].style.visibility='hidden';

What would the syntax look like for this if I'm trying to do it in Firefox? If I know that, then I'll add in an if statement to check if the browser is firefox and use the alternate code.

Answer 1

document.all is a not a supported function, nor is it in the spec for the DOM ( Here is more on that). You will have to grab the div by another method.

querySelector

document.querySelector('div#layer1').style.visibility = 'hidden';    
document.querySelector('div#layer1').style.visibility = 'visible';

OR

getElemenyById

document.getElementById('layer1').style.visibility = 'hidden';
document.getElementById('layer1').style.visibility = 'visible';

are two major methods.

Answer 2

Don't use document.all[] . It is not supported by all browsers, and is largely an artifact of the IE4 days. Instead use document.getElementById() to access the <div> 's id attribute:

document.getElementById("layer1").style.visibility = 'hidden';
document.getElementById("layer1").style.visibility = 'visible';

Answer 3

//class named layer1

document.querySelectorAll('.layer1').style.display='none';
document.querySelectorAll('.layer1').style.display='block';


//id named layer1
document.querySelector('#layer1').style.display='none';
document.querySelector('#layer1').style.display='block';