在控制台中显示值 shoe false [重复]

Question

我有一个 div 和按钮，我第一次单击按钮没有响应，然后再次单击并显示

function banne() {
  var ban = document.getElementById("content");
  //consloe.log(ban.style.display === "none");
  if (ban.style.display === "none") {
    ban.style.display = "block";
  } else {
    ban.style.display = "none";
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

这里控制台值显示错误值，但我在 div 类 banner-content 中写入了内联样式 style="display:none"，它可以工作，为什么不采用样式表值，知道吗？

Answer 1

使用内联事件处理程序一般是not a good idea。

向文档添加监听器。要切换显示，请使用单独的 css 类（sn-p 中的.visible）并切换它。它让您的生活变得如此轻松。

document.addEventListener("click", banne);

function banne(evt) {
  if (evt.target.classList.contains("banner")) {
    document.querySelector("#content").classList.toggle("visible");
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

.banner-content.visible {
  display: block;
}

<button class="banner"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

Answer 2

虽然style 没有注册样式表属性，但您可以检查样式是否不 等于“block”，然后将其设置为block，否则不设置。另请参阅 getComputedStyle 和 style 之间的区别：https://developer.mozilla.org/en/DOM/window.getComputedStyle

function banne() {
  var ban = document.getElementById("content");
  //consloe.log(ban.style.display === "none");
  if (ban.style.display !== "block") {
    ban.style.display = "block";
  } else {
    ban.style.display = "none";
  }
}

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}

<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
  Some Data
</div>

Answer 3

Javascript 无法访问带有 ban.style.display 的 CSS 文件中提到的样式。你必须使用getComputedStyle() 方法。

window.getComputedStyle(ban, null).getPropertyValue("display");

但在你的情况下，我认为最好使用基于类的切换，

CSS

.banner-content {
  display: none;
  height: 100px;
  color: #fff;
  background: #1b1b1b;
}
.banner-content.active {
  display: block;
}

JS

function banne() {
  var ban = document.getElementById("content");
  ban.classList.toggle("active");
}