javascript - 使用 cssText 切换元素

Question

我想切换元素可见性。目前，当点击 button1 时，它只是隐藏，而不是切换。

这是我的代码，我想知道为什么它隐藏后不显示 button2。

function fonk10() {
var x = document.getElementsByClassName("eben")[0];
    if (x.style.cssText === "display:none") {
        x.style.cssText = "display:inline-block";
    } else {
        x.style.cssText = "display:none";
    }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

Answer 1

您使用的条件始终为 false。这就是为什么 else 总是在执行的原因。您必须通过在 : 和 ; 最后插入空格来稍微格式化字符串。

改变

if (x.style.cssText === "display:none") {

到

if (x.style.cssText === "display: none;") {

function fonk10() {
  var x = document.getElementsByClassName("eben")[0];
  if (x.style.cssText === "display: none;") {
      x.style.cssText = "display: inline-block";
  } else {
      x.style.cssText = "display: none";
  }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>

你也可以像下面这样使用display属性:

function fonk10() {
var x = document.getElementsByClassName("eben")[0];
  if (x.style.display === "none") {
      x.style.display = "inline-block";
  } else {
      x.style.display = "none";
  }
}

.eben{
  background:green;
  padding:5px;
  display:inline-block;
}

#eben{
  background:green;
  padding:5px;
  display:inline-block;
}

<div id="eben" onclick="fonk10()">BUTTON1</div>
<div class="eben">BUTTON2</div>