为什么JavaScript实现的display属性切换功能没有生效？

• 你的代码仅将document.getElementById("filter").style.display的取值复制给了局部变量x，后续对x的修改只会变更变量本身的值，不会回写到DOM元素的样式属性上，等于没有实际修改目标div的display效果。
• 如果你目标div的display初始值是写在<style>标签或外部CSS文件中，而非行内style属性，直接通过.style.display无法读取到对应值，会返回空字符串，也会导致判断逻辑失效。

function toggleFilter() {
  // 先获取目标元素实例
  const filterElement = document.getElementById("filter");
  // 兼容读取行内样式和CSS定义的样式值
  const currentDisplay = filterElement.style.display || getComputedStyle(filterElement).display;
  // 直接修改元素的style属性
  if (currentDisplay === "none") {
    filterElement.style.display = "flex";
  } else {
    filterElement.style.display = "none";
  }
}

使用CSS类切换的方式实现逻辑更简洁，可维护性更高：

1. 先定义样式类

.filter--hidden {
  display: none !important;
}

2. 修改JS逻辑

function toggleFilter() {
  document.getElementById("filter").classList.toggle("filter--hidden");
}

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