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>

Answer 2

一个非常好的问题：第二个按钮需要内嵌阶梯。您还需要CSS规则的“正交精度”。但是我不建议在生产中使用它。

Point getUpperLeftCoordinate(Point... points) {
    Point mostUpperLeft = null;
    for (Point point : points) {
        if (mostUpperLeft == null) {
            mostUpperLeft = point;
        } else {
            double diffX = mostUpperLeft.getX() - point.getX();
            double diffY = point.getY() - mostUpperLeft.getY();
            if (diffX + diffY > 0) {
                mostUpperLeft = point;
            }
        }
    }
    return mostUpperLeft;
}

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

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

Answer 3

创建一个布尔变量来说明您的元素状态，让我们将其称为show，根据元素是否显示，然后show将为true，否则被隐藏，并使用此变量进行验证

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

使用cssText切换元素

3 个答案: