Hello ~ 可爱的小伙伴我们又见面啦。
下面是我和大家分享的JS隐藏元素的5种方法,希望可以帮助到有需要的小伙伴。
让我们一起来看看吧 GO!
第一种
#myBtn {
width: 300px;
height: 150px;
background-color: aquamarine;
color: coral;
font-size: 35px;
}
.a {
display: none;
}
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function (event) {
document.getElementById("myBtn").classList.add("a");
})
第二种
#myBtn {
width: 300px;
height: 150px;
background-color: rgb(16, 130, 150);
color: coral;
font-size: 35px;
}
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function (event) {
document.getElementById("myBtn").style.display = "none";
})
第三种
#myBtn {
width: 300px;
height: 150px;
background-color: rgb(220, 140, 228);
color: coral;
font-size: 35px;
}
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function (event) {
document.getElementById("myBtn").style.visibility = "hidden";
})
第四种
#myBtn {
width: 300px;
height: 150px;
background-color: rgb(192, 231, 128);
color: coral;
font-size: 35px;
}
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function (event) {
document.getElementById("myBtn").style.opacity = 0;
})
第五种
#myBtn {
width: 300px;
height: 150px;
background-color: rgb(156, 97, 121);
color: coral;
font-size: 35px;
}
var btn = document.getElementById("myBtn")
btn.addEventListener('click', function (event) {
$("#myBtn").hide();
})
end~