问题描述
我在 JavaScript 中有一段代码试图更改 CSS 中的属性“visibility: hidden;”对于“可见性:无;”点击一个按钮
const modal = document.getElementById('modal');
const button = document.getElementById('button');
button.addEventListener('click',function(){modal.style.visibility = "none";})
这段代码可以让模态消失,但不能让它出现
这是模态 CSS 属性:
#modal{
margin: 5px 20px;
padding: 20px 20px;
position: absolute;
top: 105px;
right: 5px;
width: 250px;
height: 150px;
background-color: lightgreen;
border-radius: 10px;
color: darkgreen;
align-items: center;
border: 4px solid darkgreen;
visibility: hidden;
}
解决方法
可见性有 2 个有效值:
-
hidden
:隐藏元素 -
visible
:显示元素
如果您希望您的元素在点击时出现:您需要更改为使用 visible
:
button.addEventListener('click',function(){modal.style.visibility = "visible";})
此外,我建议您改用 display
属性:
-
block
:显示元素 -
none
:隐藏元素
额外阅读:What is the difference between visibility:hidden and display:none?