使用 JS EventListener 更改 CSS 显示属性

Question

我正在尝试向我正在处理的项目上的按钮添加功能...按下按钮时我希望元素不再显示在页面上。 但是，我无法让这个过程发挥作用。 这是我针对这个特定元素的 CSS 代码：

.content-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40.06rem;
    min-width: 58rem;
    background: #ffffff;
    box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.25);
    border-radius: 36px;
  }

这是我的JS代码：

//DOM 选择器

const button = document.getElementById("subscribe-button");
const mainPage = document.getElementsByClassName("content-container")[0];

//事件监听器

button.addEventListener("click", function (e) {
  if (mainPage.style.display === "flex") {
    mainPage.style.display = "none";
  }
});

我将 JS 事件侦听器添加到页面上的按钮，并期望按下按钮会将显示属性从“flex”更改为“none”，因此将不再显示相关元素。

但是，当我按下按钮时没有任何反应。

如果我将 JS 逻辑更改为以下代码，我可以让它工作：

button.addEventListener("click", function (e) {
  if (mainPage.style.display === "none") {
    mainPage.style.display = "flex";
  } else {
    mainPage.style.display = "none";
  }
});

如果我理解正确的话，JS 会将 display 属性的默认值视为“none”，但在这种情况下，我在 CSS 中明确定义了“display: flex”，那么为什么第一个代码块不起作用，而第二个代码块却正常工作呢？ 此外，如果第二个代码块是必要的（看起来是这样），是否有更简洁的方法来编写它？看来 if 语句的第一个块没有执行任何操作，因为它是“else”块执行所有工作。

Answer 1

当您执行

if

检查

mainPage.style.display === "flex"

时，

mainPage.style.display

正在检查 html 元素上的内联样式。它不检查 css 样式表。因此，您的 if 块在您发布的第一个代码块中失败，因此样式不会更改。在示例的第二个代码块中。另一个正在做这项工作，因为你的

if mainPage.style.display === "none"

再次失败了。要实际检查该元素的显示样式，您需要执行以下操作：

if (window.getComputedStyle(mainPage).display === "flex") {
  mainPage.style.display = "none"
}