How can I show an element that has display none in a CSS rule

Question

I have a really simple external css stylesheet that has the following    div hideBox       display none      So when the html page loads  the div with that class attribute  hideBox  will not show on the page  which is what I want  But I the box to show appear when a user clicks on a button on that same page  I tried to use the onclick event to do this  but the div won t show    So for example  the code would be     lt script language  javascript  gt  function showmydiv     document getElementById  mybox   style display           lt  script gt   lt  head gt   lt body gt   lt div id  mybox  class  hideBox  gt  some output of text  lt  div gt   lt input type  button  name  ShowBox  value  Show Box  onclick  showmydiv    gt    What s strange is that a setup similar to this works when I use visibility hidden  position absolute  and I can use a JavaScript function to show the  lt div gt    What am I doing wrong here

User · Answer

I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.

Have a look at jQuery here

User · Answer

document getElementById  mybox   style display    block

User · Answer

try setting the display to block in your javascript instead of a blank value

User · Answer

Because setting the div s display style property to    doesn t change anything in the CSS rule itself  That basically just creates an  empty   inline CSS rule  which has no effect beyond clearing the same property on that element   You need to set it to something that has a value   document getElementById  mybox   style display    block     What you re doing would work if you were replacing an inline style on the div  like this    lt div id  myBox  style  display  none   gt  lt  div gt   document getElementById  mybox   style display

[javascript] How can I show an element that has display: none in a CSS rule?

Examples related to javascript

Examples related to css

Examples related to html