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

81 阅读 0 评论 54 点赞

我是靠谱客的博主含糊蜜蜂，最近开发中收集的这篇文章主要介绍JS（DOM）—控制div的显示(block)与隐藏 (none)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：点击一个按钮，点击显示，显示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>

功能展示：