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，并且可以将其填充以用于过时的浏览器。

¹并不是真正的计算属性值，而是 resolved 或二手属性值details here。

为什么点击才能应用我的功能？

2 个答案: