html 隐藏div

作者：_永恒灬莫言发布日期:2025-05-17 浏览:51

<!DOCTYPE html>
<html>
<head>
    <title>隐藏 div 示例</title>
    <style>
        /* 使用 CSS 隐藏 div */
        #hiddenDiv {
            display: none; /* 这个属性使 div 完全不显示，也不会占用页面空间 */
        }
    </style>
</head>
<body>
    <div id="visibleDiv">
        这是一个可见的 div。
    </div>

    <div id="hiddenDiv">
        这是一个被隐藏的 div。
    </div>

    <script>
        // 使用 JavaScript 动态隐藏或显示 div
        function toggleDiv() {
            var div = document.getElementById("hiddenDiv");
            if (div.style.display === "none") {
                div.style.display = "block"; // 显示 div
            } else {
                div.style.display = "none"; // 隐藏 div
            }
        }
    </script>

    <button onclick="toggleDiv()">点击切换隐藏/显示 div</button>
</body>
</html>

解释说明：

CSS 隐藏 div：通过设置 display: none，可以使 div 完全不显示，并且不会占用页面空间。这种方式适用于页面加载时就希望某些元素不可见的情况。
JavaScript 动态控制 div 的显示和隐藏：通过 JavaScript 可以动态地控制 div 的显示和隐藏。toggleDiv 函数会根据当前 div 的显示状态来切换其 display 属性。
按钮触发：页面中有一个按钮，点击它可以调用 toggleDiv 函数，从而实现对 hiddenDiv 的显示和隐藏操作。

上一篇：html文本换行符

下一篇：html5canvas