Javascript显示== "none"实际上没有显示

Question

我编写了一个以前使用过的基本切换函数，但由于某种原因它不能完全工作。我这么说的原因是因为当我控制台记录显示时，它说显示没有，但元素永远不会消失。我知道该函数正在触发，并且它检测到元素显示为“”，但是它将其设置为无(并将其记录到控制台证明了这一点)，但实际元素并没有从屏幕上消失。

function filter_toggle(){
    var form = document.getElementById("filter_form");
    var display = form.style.display;
    console.log(display);
    if (display == ""){
        display = "none";
    }
    else if (display == "none"){
        display = "";
    }
}

<div id="filter_wrap">
                <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
                <div id="filter_form" class="bg-1D1D1D">
                ...more elements...
                </div>
</div>

Answer 1

变量display已经被赋予了对象的display属性的值(这是一个字符串值)，改变变量不会改变属性，而是，您可以使用样式:

function filter_toggle() {
  var form = document.getElementById("filter_form");
  var style = form.style;
  
  if (style.display != "none") {
    style.display = "none";
  } else if (style.display == "none") {
    style.display = "block";
  }
}

<div id="filter_wrap">
  <div id="filter_toggle" class="basic_toggle" onclick="filter_toggle()">--Filter--</div>
  <div id="filter_form" class="bg-1D1D1D">
    Hello, World!
  </div>
</div>