0

I was working through an example, and I came across this.

I had a div set initially to be collapsed, and then checked its status from a javascript function. I was initially testing for "none", and it wasn't working. After some testing, I found that testing for "" did work. Is this standard, or is it something I'm doing?

Working version:

<div id="menuItem" class="well collapse">
    <p id="itemDesc">test</p>
</div>
...
function showItem(itemName){
if (document.getElementById('menuItem').style.display == ""){ 
    document.getElementById('menuItem').style.display = "block";
    }
}
Eric G
  • 2,577
  • 1
  • 14
  • 21
user3602839
  • 27
  • 2

1 Answers1

0

This is standard via the method you are using. document.getElementById('element').style.display only checks the styles that live on the element and since no display style lives on that element it is returning "". To get the computed styles (i.e. from the style sheet) on an element you need to use the property getComputedStyle (or currentStyle for IE).

This question/answer has some really good info on the difference and a good function for how to check:

myDiv.style.display returns blank when set in master stylesheet

Eric G
  • 2,577
  • 1
  • 14
  • 21