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

默认情况下，使用display时，x.style.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>

在隐藏和显示元素之间切换

3 个答案: