点击链接修改CSS display属性无响应？问题排查

我有一个id为"menu-list"的ul元素，已在CSS文件中设置其display属性为"none"，希望点击链接时将该属性改为"flex"。为链接绑定了click事件触发属性修改，但点击后无任何反应；在myFunction()函数中打印该元素的display属性值，控制台仅输出空白内容。

错误原因 #

• element.style.display的局限性：这个属性只能读取元素的内联样式（写在HTML标签style属性里的样式），无法获取外部CSS文件或<style>标签中设置的样式。你在CSS里设置的display: none属于外部样式，所以menuList.style.display一开始会输出空白，导致判断条件menuList.style.display === "none"永远不成立，切换逻辑无法执行。
• a标签的默认跳转行为：点击的<a>标签带有href=""，点击后会触发页面默认的刷新跳转，就算切换逻辑能执行，页面刷新后也会回到初始状态，看起来像是没反应。

解决方案 #

推荐用类名切换的方式控制样式（更符合前端开发最佳实践，也能避免样式读取的问题），同时阻止a标签的默认行为：

修改后的CSS

#menu-list {
  display: none;
}
/* 添加类来控制显示状态 */
#menu-list.show {
  display: flex;
}

修改后的JS

let menuList = document.getElementById("menu-list");

function myFunction(e) {
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  // 切换类名实现显示/隐藏切换
  menuList.classList.toggle("show");
}

修改后的HTML

<div class="container">
  <div class="inner">
    <nav id='menu'>
      <div class="logo">
        <img src="src/assets/images/hp-logos_white.png" alt="logo" class="fluid">
      </div>
      <ul id="menu-list">
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
      </ul>
      <!-- 传递事件对象给函数 -->
      <a href="" class="icon" onclick="myFunction(event)">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  </div>
</div>

如果坚持用读取样式的方式，也可以用getComputedStyle获取实际计算后的样式，但类名切换的方式更简洁易维护：

function myFunction(e) {
  e.preventDefault();
  const computedStyle = window.getComputedStyle(menuList);
  if (computedStyle.display === "none") {
    menuList.style.display = "flex";
  } else {
    menuList.style.display = "none";
  }
}

内容的提问来源于stack exchange，提问作者KapteinKonyn