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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript not detecting css attributes

    I have a link with the css attributes:

    Code:
    #foo {
    	padding: 10px 0 15px 0;
    	display: none;
    }
    I have a javascript line that is supposed to look at foo's display property and make a change depending on what it is set at:

    Code:
    document.getElementById(id).style.display = document.getElementById(id).style.display == 'block' ? 'none' : 'block';
    It wasn't working as expected (I had to click it twice the first time before it would start working), so I had it alert me to what the display was set at so that I could see what was going on. That alert came back blank. So... apparently, the script is not seeing what foo's display property is set to.

    After I click it the first time, the second time it is clicked it works, and the alert comes back and says that it was set to 'none' before it changes it to 'block'. That would be expected according to the script since the script found that #foo was != to 'block' the first time it was clicked (it was blank).

    Any idea why this is happening?

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    i see what you are talking about.....
    if you set the elements style using css, the element doesn't actually have a style attribute set to it. so if you check to see if the display is set, obviously it wont be cuz the element doesnt have a style attribute set.

    in the below i used style.backgroundColor instead of display.
    you have to create a work around here..... first you ahve to detect if the element has a style attribute. if it does, swap colors (in your case swap display) if it doesnt have a style attribute, create one, and while you're at it set it to one of the values. this keeps you from having to click twice.


    Code:
    <style>
    input.butt{background-color:#ffffff;}
    </style>
    <input type=button id=but class=butt onclick="changeme(this);">
    
    <script type="text/javascript">
    function changeme(elm){
    var hasstyle=(elm.style.backgroundColor)?1:0;
    if(hasstyle){
    var sty=(elm.style.backgroundColor=="#ffffff")?'#000000':'#ffffff';
    elm.style.backgroundColor=sty;
    }else{elm.style.backgroundColor="#000000";}
    }
    </script>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool. That is a neat workaround. The question that I have is why can javascript not detect the display attribute of the element from the css?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by FlipperBizkut View Post
    Cool. That is a neat workaround. The question that I have is why can javascript not detect the display attribute of the element from the css?
    It can but not in the way you are doing it. It requires a different method. This method is usually called computedStyle but it varies among browsers. Read this: http://www.javascriptkit.com/dhtmltu...cascade4.shtml
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great! While thinking about it, I kinda answered my own earlier question. Javascript can only access LINEAR css, as it is actually a property of the element. Since the display property would be changing its default value from page to page, I just made php do the work for me and wrote that display property inline for the one element that needed it. Works like a champ.

    In the future, I'm sure that I will use currentStyle/getComputedStyle for more complex issues, but for now, I think that the inline css for the one element will work just fine.

    Thanks for the help!


  •  

    Posting Permissions

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