Javascript.cssText function 不起作用

Question

所以我的问题是为什么 is.cssText 不改变被称为 .unveil 的 html 元素。 我添加了当容器 for.unveil 被点击时的事件，.unveil 元素应该是可见的。 当点击 .unveil 元素时，它应该隐藏自己。 但是每当我运行程序时，它都说这些值没有被覆盖

这是 function，我没有收到错误消息或类似的信息，

 function unveilAnswer(){ // let's add the flip functionality for showing the answers var unveilNode=null; for (i=0; i<containerCards.length; i++) if (this===containerCards[i]) {//"this" in this case refers to the object that the event is being added to; it will be from the.container-card perspective unveilNode=this.querySelector(".unveil"); this.addEventListener("click", e=>{ unveilNode.style.cssText="display:block; height:95vh; width:95vw;"; }); unveilNode.addEventListener("click", (e)=>{ unveilNode.style.cssText=" display:none; width:0px; height:0px;"; showCards(); //for when it's time to click on another question; it will hide the current one console.log(unveilNode); // fpr testing purposes }); hideCars(i); } }

这是单击容器 for.unveil 后的结果，从内联 CSS 可以看出，大小发生了变化，但是当您单击 .unveil 元素时，没有任何反应...

 <div class="unveil" style="display: block; height: 95vh; width: 95vw;"> <p>test!</p> </div>

在屏幕上显示 .unveil 元素并单击它后，即使添加了“单击”事件侦听器，高度和宽度仍保持不变。 我什至尝试使用.style.height 和.style.width，但它仍然没有响应所以我的问题是为什么is.cssText 不能正常工作？

Answer 1

您已经添加了两次事件侦听器，除非您使用“removeEventListener()”，否则两者都会触发。 仅对 click 事件使用一个事件侦听器，然后根据 style 属性中的内容，使用它来确定将其更改为什么。

更常见的是设置 class （例如.hidemycard { display:none }然后使用像unveilNode.classList.toggle('hidemycard')或类似的东西，它将在每次点击时显示/隐藏元素。编辑：我已经添加一个例子来告诉你如何做到这一点。

 window.onload = (event) => { const card = document.getElementById('me'); card.addEventListener('click', () => { document.getElementById('thingtoshow').classList.toggle('hideme'); }); }

 #me { cursor: pointer; }.hideme { display: none; }

 <div id='me' class='card'>Click me!</div> <div id='thingtoshow' class='hideme'>This is some content!</div>