如何将元素的显示设置为"阻止"？(更多内容见下文)

Question

我在按钮中添加了一个事件侦听器，这将更改#popUpForm的css，但只有当我在#popUpForm中添加内联css时，它才有效。如果我想在css中设置元素的显示，我该怎么做？

const addBtn = document.querySelector('#addItem')
addBtn.addEventListener('click', function() {
document.querySelector('#popUpForm').style.display = 'block'
})

#popUpForm {
width: 350px;
height: 500px;
display: none; /* change this */
}

<input id="addItem" type="button" value="+">
<div id="popUpForm">
Some stuff
</div>

Answer 1

您的代码可以工作，但我仍然建议使用类

const addBtn = document.querySelector('#addItem')
addBtn.addEventListener('click', function() {
document.querySelector('#popUpForm').classList.toggle("hide"); // or classList.remove("hide")
})

#popUpForm {
width: 350px;
height: 500px;
}
.hide {
display: none;
}

<input id="addItem" type="button" value="+">
<div id="popUpForm" class="hide">
Here is some stuff
</div>

Answer 2

您可以使用jQuery显示/隐藏方法：

$('#popUpForm').hide();
$('#popUpForm').show();

或者使用VanilaJs:

const hide = (elem) => {
elem.style.display = 'none';
}

const show = (elem) => {
elem.style.display = 'block';
}

// usage
// hide element
hide(document.querySelector('#popUpForm'));
// show element
show(document.querySelector('#popUpForm'));