在javascript中隐藏和显示div答案

【问题标题】：hide and show div in javascript在javascript中隐藏和显示div
【发布时间】：2017-04-20 14:47:16
【问题描述】：

我想显示然后隐藏 div，但是当我第一次单击按钮时它不起作用，当我第二次单击时它正常工作。我希望它在第一次点击时起作用。

HTML

    <p>Click the button</p>
    <button onclick="myFunc()">Try it</button>
    <div id="divi">
     Div region
    </div>

CSS

     #divi {
        width: 50%;
        padding: 50px 0;
        text-align: center;
        background-color: #ccc;
        margin-top:20px;
        display:none;
     }

Javascript

       function myFunc() {
        var dv = document.getElementById('divi');
        if (dv.style.display ==='none') {
        dv.style.display = 'block';
        } else {
         dv.style.display = 'none';
         }
         }

这是笔：https://codepen.io/animaxf/pen/xdVVbK

【问题讨论】：

第一次点击按钮设置display: none，第二次设置display: block。

标签： javascript html css

【解决方案1】：

这是因为从技术上讲，样式属性是空的，所以style.display 实际上是null。所以它首先在第一次点击时将其设为display:none;。

如果您将 JavaScript 更改为：

function myFunc() {
  var dv = document.getElementById('divi');
  if (dv.style.display === 'block') {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }
}

基本上先检查它是否是块 - 它会起作用。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display === 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

【讨论】：

这个答案似乎有点骇人听闻，只适用于开始隐藏的 div

【解决方案2】：

首先单击让它落到else 语句并显示它。

之后你就进入了一个良好的循环。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display == 'block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display: none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

【讨论】：

【解决方案3】：

添加这个 <div id="divi" style="display:none">

第一次，没有为你的 div 定义显示

【讨论】：

【解决方案4】：

当您第一次单击时，没有应用任何样式 (dv.style.display = "") 因此，dv.style.display!== 'none' 变为 true 并且 dv.style.display = 'none'被应用。

function myFunc() {
    var dv = document.getElementById('divi');
  
    if (dv.style.display !=='none'&& dv.style.display !=="") {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

【讨论】：

【解决方案5】：

第一次点击时没有设置display属性。只需切换属性 - 它会起作用。

https://codepen.io/anon/pen/XRddvd

【讨论】：

【解决方案6】：

第一次单击按钮时，CSS 属性 display 尚未设置，因此当单击发生时，它会检查 dv.style.display !== 'none' 而实际上是 dv.style.display === ''

您可以在代码中解决此问题，或者您可以简单地更改 CSS，因为它是更优雅的解决方案。只需在其 CSS 定义中将display: block（或display: none，根据您希望的起始状态）应用到#divi。

【讨论】：

【解决方案7】：

那是因为你改变了 div 的样式，但是 display:none 属性在 class 元素内部。因此，第一次 div 没有 display 属性并将其声明为none。要解决此问题，请将style="display:none; 放在 div 上，而不是在 css 文件中声明它

【讨论】：

【解决方案8】：

当您第一次加载页面时，该类未声明，这意味着您声明 if (dv.style.display !=='none') 将返回 true，然后应用显示属性 dv.style.display = 'none';

您应该使用if (dv.style.display =='block') 来检查它是否显示。

function myFunc() {
    var dv = document.getElementById('divi');
    if (dv.style.display =='block') {
        dv.style.display = 'none';
    } else {
        dv.style.display = 'block';
    }
}

#divi {
    width: 50%;
    padding: 50px 0;
    text-align: center;
    background-color: #ccc;
    margin-top:20px;
    display:none;
}

<body>

<p>Click the button</p>

<button onclick="myFunc()">Try it</button>

<div id="divi">
Div region
</div>

</body>

【讨论】：