Question

我想点击它来改变div的高度。

为什么它在第一次点击时不起作用，而第二次点击不起作用？

我不知道为什么，但div的高度是""（在第二次点击时20px由于else condition）

如果我在html元素中定义div的高度（style =“height：20px”），它就可以工作。

<html>
<head>
<script>
    function divOpen() {
        var divHeight= document.getElementById("divBottom").style.height;
        if (divHeight=="20px") {
        document.getElementById("divBottom").style.height="200px"; 
        }
        else {
            document.getElementById("divBottom").style.height="20px"; 
        }
    }


</script>

    <style>
        div{
            border:solid 1px gray; 
            width:200px;
            height:20px;   
        }
        .divBottom {
            position: fixed;
            bottom: 0;
        right: 20px;
        cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="divBottom" id="divBottom" onclick="divOpen()"></div>
</body>
</html>

所以我知道如何修复它，但我不知道为什么第一次点击时高度为空。

请告诉我..

任何帮助表示赞赏！

Answer 1

在初始点击中，您的div的height样式属性为''，因为您尚未设置它。

通过style属性设置高度和使用类之间存在差异。尝试重构代码，并使用offsetHeight代替style.height。

<强>的JavaScript

function divOpen() {
  var divHeight= document.getElementById("divBottom").offsetHeight;
  console.log(divHeight);
  //22 because of the border
  if (divHeight == 22) {
    document.getElementById("divBottom").style.height="200px"; 
  }
  else {
    document.getElementById("divBottom").style.height="20px"; 
  }
}

DEMO

通过单击更改div的高度

1 个答案: