为什么单击以应用我的功能？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么单击以应用我的功能？相关的知识，希望对你有一定的参考价值。
我正在尝试编写一个代码，当您单击它显示的按钮时，再次按下它时会隐藏图像。我使图像显示为无，我希望它在按下按钮时更改为阻止（因此它显示图像）。
它可以工作，但只有当你点击两次。我该怎么做才能一键激活它？
html：
<button id="categoryBtn" onclick="insta()">instagram users</button>
function insta() {
var a = document.getElementById("instaBalas");
if (a.style.display == "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
答案
因为当你第一次点击时显示为空字符串。所以它然后设置为'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">另一答案
元素上的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>以上是关于为什么单击以应用我的功能？的主要内容，如果未能解决你的问题，请参考以下文章
在 Activity 内部，如何暂停 for 循环以调用片段，然后在按钮单击片段后恢复循环以重新开始
如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用