JS（DOM）—控制div的显示(block)与隐藏 (none)

JS控制div显示隐藏

最新推荐文章于 2025-08-05 14:59:35 发布

原创最新推荐文章于 2025-08-05 14:59:35 发布 · 6.9k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的JavaScript功能，通过点击按钮实现div元素的显示与隐藏。代码利用了innerHTML和style.display属性，展示了如何在B/S架构下实现元素的动态显示与隐藏效果。

需求：点击一个按钮，点击显示，显示div中信息，点击隐藏，隐藏文本框内容。

代码展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div{
            width:200px;
            height:100PX;
            border:2px solid pink;
        }
    </style>
    <script>
        onload = function () {
            document.getElementById('btnShow').onclick = function () {
                var divShow = document.getElementById('divShow');//获取div中的元素
                if (this.value == '隐藏') {
                    this.value = '显示';
                    divShow.style.display = 'none';//控制层隐藏
                }
                else {
                    this.value = '隐藏';
                    divShow.style.display = 'block';//控制层显示
                }
            };
        };
    </script>
</head>
<body>
    <input type="button"  id="btnShow" value="隐藏" />
    <div id="divShow">小了白了兔，白了又了白，两只耳朵竖起来，蹦蹦跳跳真可爱。</div>
</body>
</html>

功能展示：