在HTML中隱藏和顯示Div標簽-有解無憂

在這里，我試圖隱藏塊，但第一次我需要在每次重繪頁面時雙擊該按鈕。我在下面附上了我的代碼以供參考。

<!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>

為什么會這樣，有人可以讓我知道我哪里出錯了嗎？

uj5u.com熱心網友回復：

正如在 SO 上的這個答案所解釋的那樣，只有行內樣式或應用于元素的樣式作為元素的屬性<div style="diplay:none;"></div>才會顯示在您訪問element.style. 您需要訪問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>

uj5u.com熱心網友回復：

在第一次單擊時，頁面上找不到 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>

uj5u.com熱心網友回復：

與@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>

uj5u.com熱心網友回復：

問題是最初的 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>

uj5u.com熱心網友回復：

一種優雅的方法是簡單地使用切換功能。您只需要添加一個可以切換的隱藏類。

    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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402033.html

標籤：javascript html css

上一篇：將角色多移動幾格似乎會導致整個場景（物理世界）震動，這是為什么呢？我如何解決它？

下一篇：找到陣列內元素的總和對？