How do you toggle the visibility of a div in FF with javascript? (IE and Chrome work fine)

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';