隐藏div的四种方式

最新推荐文章于 2024-10-19 16:42:00 发布

原创最新推荐文章于 2024-10-19 16:42:00 发布 · 1.7w 阅读

20 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

8 篇文章

订阅专栏

隐藏div是指所选择的div不显示在页面上，但是隐藏后有两种效果
1.隐藏过后的div的位置还是被占用了
2.隐藏过后的div的位置没有被占用
下面看几种隐藏div的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="box"></div>哈哈哈哈
<script src="common.js"></script>
<script>
    document.getElementById("btn").onclick = function () {
        //隐藏div的三种方式

        // document.getElementById("box").style.display = "none";// 不占位
        // document.getElementById("box").style.visibility="hidden";//占位
        // document.getElementById("box").style.opacity=0;//占位

        document.getElementById("box").style.height="0px";
        document.getElementById("box").style.border="0px red solid";//占位

    }
</script>

</body>
</html>