通过JS EventListener修改CSS display属性失效问题及优化咨询

我正在为项目中的按钮添加功能：点击按钮时隐藏指定元素，但最初的代码无法实现效果。

对应元素的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";
  }
});

我预期点击按钮后，元素的display属性从flex改为none从而隐藏，但点击按钮无任何反应。修改为以下JS代码后功能正常：

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

我的疑惑：

• 明明CSS中已显式设置display:flex，为何JS获取到的初始display值并非flex？
• 若必须使用第二种代码，是否有更简洁的写法？因为if分支似乎未起作用，实际生效的是else分支。

解答 #

1. 初始无法获取flex值的原因 #

element.style仅能读取元素的内联样式（即直接写在HTML元素style属性中的样式），无法获取通过外部CSS文件或<style>标签定义的样式。你的display:flex是通过类选择器设置的外部样式，所以初始状态下mainPage.style.display是空字符串，不会触发第一个if判断。

如果需要获取元素最终渲染时的实际样式，应该使用window.getComputedStyle(mainPage).display，它能返回浏览器计算后应用在元素上的样式值。

2. 更简洁的写法 #

写法一：三元运算符简化逻辑

利用初始mainPage.style.display为空的特性，直接用三元表达式切换状态：

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

写法二：基于计算样式判断

如果想严格依据元素当前的实际显示状态切换，使用getComputedStyle：

button.addEventListener("click", function (e) {
  const currentDisplay = window.getComputedStyle(mainPage).display;
  mainPage.style.display = currentDisplay === "flex" ? "none" : "flex";
});

写法三：CSS类切换（推荐）

遵循样式与逻辑分离的原则，用CSS类控制显示隐藏，代码更简洁易维护：
首先添加CSS类：

.hidden {
  display: none !important;
}

然后JS中切换类：

button.addEventListener("click", function (e) {
  mainPage.classList.toggle("hidden");
});

内容的提问来源于stack exchange，提问作者R Todd M