在隱藏和顯示元素之間切換

Question

我正在學習如何編程，我想在隱藏和顯示JavaScript元素之間切換。 該腳本如下所示。 它可以工作，但是我不想將其隱藏在程序運行后顯示解決方案，而是希望將其隱藏起來，以便用戶單擊並查看解決方案。 我想反過來。 我已經嘗試過使用'display：none'，但是它停止工作。 我知道它很簡單，但是我無法使其工作。 你能幫助我嗎？

 function SolutionFunction() { var x = document.getElementById("solution"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 

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

 <button onclick=" SolutionFunction ()">Try it</button> <div id=" solution "> This is the solution. </div> 

Answer 1

默認情況下，使用x.style.display獲取時， display參數為空，因為它僅查看元素屬性，而不查看CSS樣式。 因此，您可以檢查它是否為空。

並且您需要刪除id周圍的空格以使其正常運行。

 function SolutionFunction() { var x = document.getElementById("solution"); if (x.style.display === "") { x.style.display = "block"; } else { x.style.display = ""; } } 

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

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution"> This is the solution. </div> 

或者，您將display: none放到元素的style屬性上，您的代碼也將起作用：

 function SolutionFunction() { var x = document.getElementById("solution"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 

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

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution" style="display: none;"> This is the solution. </div> 

Answer 2

您可以使用元素上的隱藏屬性/屬性來切換可見性。

您還應該刪除id=""中的所有空格，以便能夠通過id正確獲取元素

 function SolutionFunction() { var x = document.getElementById("solution"); x.hidden = !x.hidden } 

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

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution" hidden> <!-- hidden by default --> This is the solution. </div> 

使用hidden = true|false方法切換可見性是一種更好的方法，因為在重置display樣式后，您並不總是知道如何處理元素顯示屬性。 您可能希望將元素呈現為inline-block或者如果它是<tr> ，則應呈現為行而不是塊

---

另一個可能的解決方案是<details>元素，但是它在Internet Explorer或Edge中尚不起作用。 但它看起來與您要完成的工作類似，不需要任何JavaScript。

在此處查看瀏覽器支持https://caniuse.com/#feat=details

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

 <details> <!-- can use the open attribute to show it by default --> <summary>try it</summary> <div id="solution"> this is the solution </div> </details> 

它可能看起來不那么漂亮，但可以對其進行更多樣式設置

Answer 3

停止空間！

function SolutionFunction() {
  var x = document.getElementById("solution");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#solution {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<button onclick="SolutionFunction()">Try it</button>

<div id="solution" style="display: none;">
  This is the solution.
</div>

更好的是，將函數中的元素作為參數引用。 還要研究三元運算符：

   function SolutionFunction(x) {
      x.style.display = x.style.display === "none" ? "block" : "none";
    }
    #solution {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    <button onclick="SolutionFunction(document.getElementById('solution'))">Try it</button>

    <div id="solution" style="display: none;">
      This is the solution.
    </div>