“style.display = 'flex/none'” 不工作

Question

所以我认为实现一个 if 语句来让一个元素在单击按钮时出现或消失是非常简单的。 几个小时后，我没有比让元素消失更进一步。 它注册了第二次点击（使用 console.log 测试），但显示属性不会变回“flex”。

在我的句子中，我也已经尝试过 'getElementById' 和 'querySelector' 的不同变体。

const edit = document.getElementById('edit-btn');
const fill = document.querySelector('#filler');

edit.addEventListener('click', popInOut(fill))

function popInOut(e){
    if(e.style.display=='flex'){
        e.style.display='none'
    }else if(e.style.display=='none'){
        e.style.display='flex'
    }
}

'filler' 元素是具有这种样式的引导列。

#filler{
    display:flex;
    flex-direction: column;
    background-color: #1c1f22;
    position:absolute;
    top:40%;
    height:50%;
}

Answer 1

嘿，是您的查询选择器导致了问题，您也可以直接在 function 中使用您的填充器，因为它在全局 scope 中声明

 const edit = document.getElementById("edit-btn"); const filler = document.getElementById("filler"); edit.addEventListener("click", fix); function fix() { if (filler.style.display === "none") { filler.style.display = "flex"; } else { filler.style.display = "none"; } }

 body { font-family: sans-serif; } #filler { display: flex; /* flex-direction: column; */ background-color: whitesmoke; position: absolute; top: 30%; left: 20%; height: 50%; gap: 1rem; } #filler div:nth-child(even) { background: turquoise; } #filler div:nth-child(odd) { background: yellowgreen; }

 <.DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link href="style.css"/> </head> <body> <div id="app"> <div id="filler"> <div>Hare krishna</div> <div>Radhe Shyam</div> <div>Sita Ram</div> </div> <button id="edit-btn">Edit</button> </div> <script src="index.js"></script> </body> </html>

“style.display = 'flex/none'” 不工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-17 01:37:29

“style.display = 'flex/none'” 不工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-17 01:37:29

解决方案1
0 已采纳 2022-01-17 01:37:29