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

Question

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

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属性的值（是字符串值），改变变量不会改变[=23] =]，相反，您可以使用 style:

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>

Answer 2

您的代码检查 style.display 属性，但随后仅设置 display，而应设置 style.display。此外，（在这种情况下）不需要 else if。您可以只使用 else。而且，在 display:none 和 display:block 之间切换更准确，而不是 display = ""（对于 hiding/showing 块级元素，如 div 或 display:inline对于 hiding/showing 内联元素，例如 span).

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

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

您还可以使用 ternary operator.

使其更紧凑

function filter_toggle(){
    var style = document.getElementById("filter_form").style;
    // This is a compact if/then/else
    style.display = style.display == "none" ? "block" : "none";
}

<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>

但是，您正在重新发明轮子并使用内联样式（由于它们引入的额外代码及其脆弱性，应尽可能避免使用内联样式）。 .classList.toggle() 函数会为您完成此操作，并使用更易于管理的 CSS 类:

let form = document.getElementById("filter_form");

function filter_toggle(){
  form.classList.toggle("hidden");
}

.hidden { display:none; }

<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>

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

Javascript display == "none" not actually displaying

html

javascript

display