为啥找不到显示属性？ （更多下文）

Posted 2023-02-22

【中文标题】为啥找不到显示属性？ （更多下文）

【英文标题】：Why ican't it find the display property? (more below)为什么找不到显示属性？ （更多下文）

【发布时间】：2021-07-06 06:37:24

【问题描述】：

我向按钮添加了一个事件监听器，它会显示 #popUpForm 的 css，但是在控制台上它什么也不记录。

标记：

<input id = "addItem" type = button value = "+">
                
<div id = "popUpForm">
    /* lot of divs*/
</div>

脚本：

const addBtn = document.querySelector('#addItem')

addBtn.addEventListener('click', function()
    console.log(document.querySelector('#popUpForm').style.display)
)

css：

#popUpForm
    width: 350px;
    height: 500px;

    display:none;  <-- looking for this

我正在使用 webpack，有可能它以某种方式弄乱了我的代码吗？任何帮助表示赞赏！

【问题讨论】：

***.com/questions/24080150/cant-get-display-attribute，在这里查看答案

您的问题得到解答了吗？如果是，请选择一个答案。如果没有，请做出相应的评论。

【参考方案1】：

element.style指仅内联样式。

要检查当前应用的样式，无论来源如何，请使用

window.getComputedStyle(document.querySelector('#popUpForm')).display

相反。请注意，在性能方面这是一个非常昂贵的调用，因此只有在没有更好的解决方案可用时才使用它。

话虽如此，我建议使用该作业的 API，即 hidden API，这将简化对可见性的检查

document.querySelector('#popUpForm').hidden

特别是，这使得切换可见性变得非常容易：

document.querySelector('#popUpForm').hidden = !document.querySelector('#popUpForm').hidden