如何将元素的显示设置为 'block' ？（更多下文）答案

【问题标题】：How can I set an element's display to 'block' ? (more below)如何将元素的显示设置为 'block' ？（更多下文）
【发布时间】：2021-04-11 04:15:59
【问题描述】：

我向按钮添加了一个事件侦听器，这将更改#popUpForm 的css，但它只有在我将内联css 添加到#popUpForm 时才有效。如果我想在 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>

【问题讨论】：

您的代码有效。我做了一个 sn-p，它按预期工作

标签： javascript html css dom webpack

【解决方案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>

【讨论】：

【解决方案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'));

【讨论】：