Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't read css visibility value

    I'm not sure why this code executes the first if condition. What should I be doing instead?

    <!DOCTYPE html>
    <head>

    <style>
    #test { visibility:hidden; }
    </style>

    <script type="text/javascript">

    function read(ID)
    {
    if(document.getElementById(ID).style.visibility == '') alert("why does this pop up?");
    else if(document.getElementById(ID).style.visibility == 'hidden') alert("this is what I would expect");
    else alert("never reached");
    }
    </script>


    </head>
    <body>
    <form><input type="button" value="test" onclick="read('test');"">
    <p id='test'> testing visibility</p>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    javascript cannot read css values unless they are defined inline or by the javascript. I don't know why. It's annoying. There are a couple of ways around it, probably simplest here being to define the style inline:
    Code:
    <!DOCTYPE html>
    <head>
    
    <style>
    </style>
    
    <script type="text/javascript">
    
    function read(ID)
    {
    if(document.getElementById(ID).style.visibility == '') {alert("why does this pop up?");}
    else if(document.getElementById(ID).style.visibility == 'hidden') {alert("this is what I would expect");}
    else {alert("never reached");}
    }
    </script>
    
    
    </head>
    <body>
    <form><input type="button" value="test" onclick="read('test');"">
    <p id='test' style="visibility:hidden;" > testing visibility</p>
    </body>
    </html>

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    What most people do, when they need to flip-flop between two states (e.g, in your case, presumably between hidden and visible) is to look for the NON-DEFAULT state.

    So if the CSS default is, as in your case, hidden, then in the JS code you would do something like this:
    Code:
    var para = document.getElementById("test");
    para.stye.visibility = ( para.stye.visibility == "visible" ? "hidden" : "visible" );
    This works because the default is seen as just "" so the first flip-flop changes it to "visible" and from then on the value has been set by JS code and so is available.

    Clearly, if you don't know ahead of time which is the default, then this can't work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •