0

Possible Duplicate:
How to access css properties in javascript when applied via external CSS file?
How do i get a computed style?

I'm trying to set up something simple to show/hide a <div> when something else is clicked. I was setting the display property in a CSS class applied to the dynamic <div>. I found that the div.style.display property is not set to the initial class value the first time I check it. I'm guessing that things are working correctly and that since I did not specifically apply the style to the tag in HTML, that it is not set when my JS executes. Would it be common practice to set display explicitly on the tag in this case so I have a value to query?

Community
  • 1
  • 1
Askable
  • 255
  • 3
  • 10
  • Display property has default value of `inline`. Reference: http://www.w3schools.com/cssref/pr_class_display.asp – Manish Jan 24 '13 at 17:49

1 Answers1

1

It would be common practice to set the elements to display:none in your CSS file that way you don't see the elements while your JavaScript is loading on the page. But you could apply the style="display:none;" inline if you want.

keeg
  • 3,990
  • 8
  • 49
  • 97
  • Interesting. I did not know about the loading aspect you mention. Are you saying that there could be a load-time "flicker" of my element if I set the style directly on the tag vs setting it through a class? – Askable Jan 24 '13 at 17:57
  • Doesn't matter how you set it through CSS, just so long as its set. The flicker could happen if you are only setting it through JavaScript and that still depends on how JavaScript is loaded and executed – keeg Jan 24 '13 at 18:03
  • OIC. Misunderstanding. I'm setting it correctly for initial display in the CSS. I was just curious as to why I could see the initial value in `.style`, and if it was best practice to set the style explicitly in a case like this. I understand now that `.style` is not the same as class. – Askable Jan 24 '13 at 18:07
  • I guess that depends when you are checking. By default `div` elements are set to `display:block` so you have to specifically overwrite that to `display:none` So I'm not surprised that the display property would not be set initially until the CSS kicks in. – keeg Jan 24 '13 at 18:11