Javascript 条件语句失败

Question

我正在尝试切换元素上的显示，虽然我使用下面的“===”条件语句来表示元素的 ID，但我无法将此代码用于工作。

有谁知道为什么条件“if (smallnavbar[0].style.display === 'none')”不起作用？有没有办法使代码工作（在 none 和 flex 之间切换显示）？

提前致谢！

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  if (smallnavbar[0].style.display === 'none') {
    smallnavbar[0].style.display = 'flex';
  }
  else if (smallnavbar[0].style.display === 'flex') {
    smallnavbar[0].style.display = 'none';
  }
}

Answer 1

style.display 是指内联样式 (<div style='display:block'></div>)。如果 display 由样式表中的 class 设置，则 display 值将为空字符串。

在这种情况下，两个条件都不成立，因此在您看来 "failing"。

您可以简单地用 console.log 在 if 语句之前仔细检查我的假设（当然假设 displayMenu 被调用）。

有几种解决方法可以解决这个问题。您可以：

检查元素的 computed style 而不是内联元素：

function displayMenu(){
  var smallnavbar = document.getElementsByClassName("small-navbar-tabs");
  var display = window.getComputedStyle(smallnavbar[0], "").display;

  smallnavbar[0].style.display = display === 'none' ? 'flex' : 'none';
}

}

为 "flex" 和 "none" 使用单独的 class 名称并检查它而不是值（如果浏览器支持或您为 classList 这很容易：
```
smallnavbar[0].classList.toggle("flexible"); 
```

假定默认值 – 例如例如，您知道所有 small-navbar-tabs 默认情况下都有 display:none，因此您可以：

if (smallnavbar[0].style.display === "flex") {
  smallnavbar[0].style.display = ""; // remove the inline style
} else {
  // since we're adding the inline style here,
  // it would pass the first check in the future.
  smallnavbar[0].style.display = "flex";
}

Javascript 条件语句失败

Javascript Conditional Statement Fails

javascript

conditional