js-元素的隐藏方式

作者: AssertDo | 来源:发表于2019-08-12 16:25 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .div{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <input type="button" id="btn" value="点击隐藏" />
        <div class="div" id="hideDiv"></div>
        <span>跟着div的后面</span>
        
        <script>
            document.getElementById("btn").onclick = function () {
                //第一种隐藏方式 --- 不占位
                document.getElementById("hideDiv").style.display = "none";
                //第二种隐藏方式 --- 占位
                document.getElementById("hideDiv").style.visibility = "hidden";
                //第三种隐藏方式 --- 占位
                document.getElementById("hideDiv").style.opacity = 0;
                //第四种隐藏方式 --- 占位
                document.getElementById("hideDiv").style.height = "0px"; 
                document.getElementById("hideDiv").style.border = "0px solid red";
            };
        </script>
    </body>
</html>