html隐藏和显示

作者：让固执流亡丶发布日期:2025-06-23 浏览:59

<!DOCTYPE html>
<html>
<head>
    <title>HTML隐藏和显示</title>
    <script>
        function toggleVisibility(id) {
            var element = document.getElementById(id);
            if (element.style.display === "none") {
                element.style.display = "block";
            } else {
                element.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <button onclick="toggleVisibility('myDiv')">隐藏/显示</button>
    <div id="myDiv" style="display: block;">
        这是一个可以隐藏和显示的段落。
    </div>
</body>
</html>

解释说明：

HTML结构:
- 一个按钮用于触发隐藏或显示操作。
- 一个<div>元素，包含要隐藏或显示的内容。
JavaScript函数 toggleVisibility:
- 接受一个ID参数，找到对应的DOM元素。
- 检查该元素的display样式属性。
- 如果元素当前是隐藏的（display: none），则将其显示出来（display: block）；反之亦然。
初始状态:
- <div>元素初始设置为display: block，即默认是可见的。
按钮点击事件:
- 点击按钮时调用toggleVisibility函数，并传入要操作的元素ID（在这个例子中是myDiv）。

上一篇：html文字颜色代码

下一篇：html怎么加图片