Search code examples
javascriptfirefoxhtmllayer

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

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.

Solution

  • 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.