不能 console.log() .style.display 信息

Question

当我点击我的输入标签时，我能够更正显示和隐藏下拉菜单之间的切换，但是当控制台记录显示的样式时，控制台上没有显示任何内容。看不到这个的解释是什么？我将如何尝试正确查看我使用的显示样式？

document.getElementById('search').addEventListener("click", function () {
    const grid1 = document.querySelector(".modal");
    grid1.style.display = grid1.style.display ? "none" : "flex";
    console.log(grid1.style.display);
});

Answer 1

而不是使用 'yourelement.style.display' 使用 'getComputedStyle' 函数来获取任何属性在这种情况下 'display' 的值，那是因为计算样式包含所有 CSS 属性设置为一个元素。即使不为元素设置属性。您仍然会在计算样式中发现属性。

使用 'getComputerStyle'

修改您的代码

document.getElementById('search').addEventListener("click", function () {
    const grid1=document.querySelector(".modal")

    console.log(window.getComputedStyle(grid1).display)
    grid1.style.display = window.getComputedStyle(grid1).display == "none" ? "flex" : "none";
    console.log(window.getComputedStyle(grid1).display)
 })

.modal {
  display: none;
}

<input id="search">
<select class="modal"></select>

更多说明请查看 MDN Web 文档Window.getComputedStyle()

不能 console.log() .style.display 信息

Can't console.log() .style.display information

javascript

css