为什么单击以应用我的功能？

Question

我正在尝试编写一个代码，当您单击它显示的按钮时，再次按下它时会隐藏图像。我使图像显示为无，我希望它在按下按钮时更改为阻止（因此它显示图像）。

它可以工作，但只有当你点击两次。我该怎么做才能一键激活它？

HTML：

<button id="categoryBtn" onclick="insta()">instagram users</button>

javascript：

function insta() {
  var a = document.getElementById("instaBalas");

  if (a.style.display == "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

Answer 1

因为当你第一次点击时显示为空字符串。所以它然后设置为'none'并在之后正常工作。你可以使用getComputedStyle

const img = document.getElementById("instaBalas")
function insta() {
  var a = window.getComputedStyle(img);

  if (a.display == "none") {
    img.style.display = "block";
  } else {
    img.style.display = "none";
  }
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">

另一种方式我建议有一个类，并使用classList.toggle()

const img = document.getElementById("instaBalas")
function insta() {
  img.classList.toggle('hidden')
}

.hidden{
  display:none;
}

<button id="categoryBtn" onclick="insta()">instagram users</button><br>
<img alt="Imgage" id="instaBalas">

Answer 2

元素上的style对象不反映其当前样式，它反映了直接在其上设置的样式。所以e.style.display == "none"最初是假的。

如果你想去那条路线，可以使用getComputedStyle，它会返回一个具有“计算”¹样式的元素，并将CSS考虑在内：

function insta() {
  var a = document.getElementById("instaBalas");

  if (getComputedStyle(a).display == "none") {
// ---^^^^^^^^^^^^^^^^^^^
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

function insta() {
  var a = document.getElementById("instaBalas");

  if (getComputedStyle(a).display == "none") {
    a.style.display = "block";
  } else {
    a.style.display = "none";
  }
}

<button id="categoryBtn" onclick="insta()">instagram users</button>
<div id="instaBalas">instaBalas</div>

但是，最好定义一个类来隐藏元素，然后在元素的toggle上使用classList：

function insta() {
  document.getElementById("instaBalas").classList.toggle("hidden");
}

实例：

function insta() {
    document.getElementById("instaBalas").classList.toggle("hidden");
}

.hidden {
  display: none;
}

<button id="categoryBtn" onclick="insta()">instagram users</button>
<div id="instaBalas">instaBalas</div>

所有主流浏览器都有classList，它可以为过时的浏览器进行polyfilled。

---

¹它不是计算属性值，它是已解析或使用的属性值details here。