Css可见性隐藏

Question

我试图通过javascript创建一个切换按钮，但没有按钮ID和隐藏的css元素可见性，我一直在尝试谷歌它，但找不到任何好的答案，我只能找到如何使用style.display切换，但当我使用隐藏在css中的可见性时，这不起作用。切换按钮的按钮名称为button2，隐藏按钮的ID为Hbutton。

document.querySelector(button8).addEventListener(click, function () {
document.querySelector("hiddenbutton").style.visibility = "visible";
});

Answer 1

获取当前样式，并使用条件。

document.querySelector(button8).addEventListener(click, function() {
const button = document.querySelector("hiddenbutton");
let current = getComputedStyle(button).getPropertyValue("visibility");
button.style.visibility = current == "visible" ? "hidden" : "visible";
})

Answer 2

您可以使用计算样式来确定元素是否可见。

document.querySelector("button").addEventListener("click", function(){
let p = document.querySelector("p");
let visibility = getComputedStyle(p).visibility;
if(visibility == "hidden")
p.style.visibility = "visible";
else
p.style.visibility = "hidden";
});

p
{
visibility: hidden;
}

<p>I will disappear</p>
<button>Toggle</button>

Answer 3

您实际上可以通过在类之间切换来实现这一点，这更简单！只需创建一个类，例如.hide，并将可见性设置为隐藏。每当您单击按钮时，所选按钮的类将在给定的类(.hide(中切换。

document.querySelector('.toggle').addEventListener('click', () => {
document.querySelector('.myBtn').classList.toggle('hide');
});

.hide {
visibility: hidden;
}

<button class="myBtn">You See Me!</button>
<button class="toggle">toggle</button>

Answer 4

这很简单：

document.querySelector(button8).addEventListener(click, function () {
var element = document.querySelector("hiddenbutton")
if (element.style.visibility == "visible") {
element.style.visibility = "hidden"
} else {
element.style.visibility = "visible"
}
});