Javascript not detecting css attributes

I have a link with the css attributes:


#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:


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?

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.



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

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?

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/dhtmltutors/dhtmlcascade4.shtml

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!