如何让一个简单的 show/hide 按钮起作用？

Question

我只是想知道...为什么我必须点击 2 次（而不是只点击 1 次）直到文本第一次出现？你能帮我解决这个问题吗？谢谢！

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

.escondido {
  display: none;
}

<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

Answer 1

你可以改变

        if (x.style.display == "none") {

到

        if (x.style.display === "" || x.style.display == "none") {

Answer 2

当你的程序启动时，x.style.display的值不是"none"，而是一个空字符串。

只需添加：

|| x.style.display == ""

这应该会按预期工作。

function mudar() {
  var x = document.getElementById("texto");
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.escondido {
  display: none;
}

<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

Answer 3

是因为最初在style中显示属性是一个空字符串""。并且您的代码直接跟随到 else 块。您可以添加一个条件来检查显示属性值是否为空字符串。

function mudar() {
  var x = document.getElementById("texto");
  console.log(x.style.display)
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.escondido {
  display: none;
}

<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

Answer 4

要获得显示属性使用 getComputedStyle() 其中 "returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain"

function mudar() {
  var x = document.getElementById("texto");
  var display = window.getComputedStyle(x).getPropertyValue('display');
  if (display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.escondido {
  display: none;
}

<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

Answer 5

这是另一种方法，切换 class，将您的样式与 "business logic" 分离：

<html>

<head>
  <style>
    .escondido {
      display: block;
    }
    
    .escondido-hidden {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
  <p class="escondido escondido-hidden" id="texto">Texto para exibir e esconder</p>
  <script>
    function mudar() {
      var x = document.getElementById("texto");
      x.classList.toggle('escondido-hidden')
    }
  </script>
</body>

</html>

如何让一个简单的 show/hide 按钮起作用？

How to make a simple show/hide button work?

html

javascript

button

display