如何通过JavaScript显示隐藏的div？

Question

I want to hide a div if javascript is turned off and show that div if javascript enabled but I don't want to use <noscript> as in chrome and opera it has some issues. So what I am doing is something like this:

<div id="box" style="display:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>

But the javascript part does not show the div. How can I make it visible is javascript is enabled. Also tried $('#box').show(); but that too didn't work.

Answer 1

使用style.display

document.getElementById("box").style.display = "block";

Answer 2

You need to set the attribute display to block

document.getElementById("box").style.display = "block";

You are trying to toggle between visibility, which is similar, but a different property.

Answer 3

You are using display: none, not visibility: hidden. Solution add visibility: hidden instead of display none if you want to use that instead of display. They work a little different.

Answer 4

You can set:

<div id='box' style='display: none;'>...</div>

And in your script code:

document.getElementById('box').style.display = 'block';

Answer 5

change display to visibility

<div id="box" style="visibility:none"></div>
<script type="text/javascript">
document.getElementById("box").style.visibility = "visible";
</script>

or change js

<div id="box" style="display:none"></div>
    <script type="text/javascript">
         document.getElementById("box").style.display = "block";
    </script>

Answer 6

You could also use a mix of CSS and Javascript to accomplish this:

HTML/Javascript

<script type="text/javascript">
    document.documentElement.className += 'js-ready';
</script>

CSS

div#box { display: none; }
.js-ready div#box { display: block !important; }