Menu
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 :
<script language="javascript"> function showmydiv() { document.getElementById('mybox').style.display = ""; } </script> </head> <body> <div id="mybox" class="hideBox"> some output of text </div> <input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()"> 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 <div>.
What am I doing wrong here?
725
getElementById("element"). style. display = "none"; To show an element, set the style display property to “block”.
display: none doesn't have a literal opposite like visibility:hidden does. The visibility property decides whether an element is visible or not. It therefore has two states ( visible and hidden ), which are opposite to each other.
display: none Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
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:
<div id="myBox" style="display: none;"></div> document.getElementById('mybox').style.display = ""; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
