在 HTML 中隐藏和显示 div 标签答案

【问题标题】：Hide and Show Div tag in HTML在 HTML 中隐藏和显示 div 标签
【发布时间】：2022-01-03 07:29:07
【问题描述】：

在这里我试图隐藏块，但我第一次需要在每次刷新页面时双击按钮。我在下面附上了我的代码以供参考。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
    }
  </style>
</head>

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

为什么会这样，有人可以告诉我我在哪里犯错了吗？

【问题讨论】：

为什么不直接使用<details><summary>？这样你根本不需要任何 JS。

标签： javascript html css

【解决方案1】：

正如this answer on SO 所解释的，当您访问element.style 时，只会显示内联样式，或作为元素属性应用到元素的样式，例如<div style="diplay:none;"></div>。您需要访问 computedStyle 以从文档中的任何位置获取应用于元素的样式。

要获取元素的computedStyle，可以使用：

window.getComputedStyle(element).display

所以，你的 JS 代码应该是这样的：

function myFunction() {
  var x = document.getElementById("myDIV");
  console.log(typeof x)
  console.log(window.getComputedStyle(x).display)
  if (window.getComputedStyle(x).display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

在这里试试：

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

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

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

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

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

【讨论】：

【解决方案2】：

问题是最初 style.display 没有设置任何东西（内联样式还没有设置）。

因此，不要测试“无”，而是测试“非阻塞”。这样即使是第一次通过也可以通过测试。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
    }
  </style>
</head>

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

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

  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display != "block") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>

</html>

【讨论】：

不这样做，您可以通过检查元素的computedValue 来制定更好的解决方案
嗯，从什么意义上说“更好”？计算值可能需要一些时间来计算。

【解决方案3】：

第一次点击时，在页面上找不到 div 元素，因为 CSS 将其设为 display: none。所以第一个 if 块没有被执行。它在第一次单击时将元素 display 设置为 none，然后在第二次单击时将值更改为 block。

所以，我们需要在第一次点击时检查display属性值是none还是""。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #myDIV {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: lightblue;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV
    element:</p>

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

<div id="myDIV">
    This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display
    property set to "none".</p>

<script>
    function myFunction() {
        var x = document.getElementById("myDIV");
        
        if (x.style.display === "none" || x.style.display === "") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

</body>
</html>

【讨论】：

【解决方案4】：

与@arsho 的回答非常相似，您可以先将其内联CSS 定义为display:none。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

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

  <div id="myDIV" style="display: none;">This is my DIV element.</div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

【讨论】：

【解决方案5】：

一种优雅的方法是简单地使用切换功能。您只需要添加一个可以切换的隐藏类。

    function myFunction() {
      var x = document.getElementById("myDIV");
      x.classList.toggle('hide');      
    }

    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;      
    }

.hide {
  display: none;
}

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

    </style>
    </head>
    <body>
    
    <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <div id="myDIV" class="hide">
    This is my DIV element.
    </div>
    
    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
    
    <script>

    </script>
    
    </body>
    </html>

【讨论】：