如何使用javascript使div在默认情况下隐藏？_Javascript_Html

如何使用javascript使div在默认情况下隐藏？

javascript html

如何使用javascript使div在默认情况下隐藏？,javascript,html,Javascript,Html,我使用以下代码切换div区域的可见性： <script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </scr

我使用以下代码切换div区域的可见性：

 <script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

要切换它，我使用onclick=“toggle_visibility（'id_of_element_To_toggle'）；”

我不喜欢的一点是，这样在页面加载时，默认情况下它是可见的。如何在默认情况下将其隐藏，直到将其切换为可见？如果可能的话，我希望在同一个javascript块中执行此操作。越简单越好

如何一次切换两个div的可见性？使它们切换。

由于您使用CSS切换，因此应使用CSS设置其初始状态：

display:none

在

style

属性中内联，或者理想情况下在全局样式表中内联。

最简单的选项是在CSS中设置此选项，然后在执行Javascript之前，从浏览器应用样式的那一刻起，它将真正设置为隐藏：

div.item_name { display: none; }

你需要称之为：

<script type="text/javascript">

toggle_visibility('id_of_element_to_toggle');

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>

CSS的性能会更快。

试试这个

  <!DOCTYPE html>
    <html>
    <body>
    <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    </script>
    <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
    <div id="foo" style="display:none">toggle visibility.</div>


    </body>
    </html>


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}
切换可见性。

在这种情况下，我使用css（内联或样式表）隐藏div，以便在默认情况下隐藏它

<div style="display:none;">

或者，您可以加载没有内容的div，然后通过javascript使用e.innerHTML=“some content”或ajax填充它？

您正在寻找CSS，而不是JS来默认隐藏它…使用CSS，

display:none

，这里不需要javascript所以如果我只需要style=“display:none”在div标签中应该这样做？你能接受一个答案吗？+1这实际上回答了OP的问题，同时提供了更好的css选项。看起来所有的答案都回答了这个问题，只是细节不同。

<div style="display:none;">