通过js控制层的动态隐藏

Posted 2020-09-23 傻狍子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过js控制层的动态隐藏相关的知识，希望对你有一定的参考价值。

 <style type="text/css">
        #dv1{
            width:1000px;
            height:1000px;
            overflow:hidden;
            display:none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById(‘btn2‘).onclick = function () {
                //1启动计时器
               var inter= setInterval(function () {
                    //2获取要操作的层
                    var dvobj = document.getElementById(‘dv1‘);
                    //3高度递减
                    var h = dvobj.offsetHeight;
                    h -= 3;
                    if (h <= 0) {
                        h = 0;
                        //4把新的高度设置给层
                        dvobj.style.height = h + ‘px‘;
                        dvobj.style.display = ‘none‘;
                        clearInterval(inter);
                    } else {
                        dvobj.style.height = h + ‘px‘;
                    }
                },100)
                
            }
        
            document.getElementById(‘btn1‘).onclick = function () {
                var dvobj = document.getElementById(‘dv1‘);
                
                if(dvobj.style.display.length==0){
                    dvobj.style.display = ‘none‘;
                    this.value = ‘显示‘;
                } else {
                    dvobj.style.display = ‘‘;
                    this.value = ‘隐藏‘;
                }
               
            }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="隐藏"id="btn1" />
    <input type="button" name="name" value="通过动画隐藏" id="btn2" />
    <input type="button" name="name" value="通过动画显示" id="btn3" />

    <div id="dv1">
        <img src="Images/QQ图片20170619233404.jpg" />
    </div>

以上是关于通过js控制层的动态隐藏的主要内容，如果未能解决你的问题，请参考以下文章

求大神指教啊，div+css，怎样用css控制一个div层的高度等于另一个层的高度，只用css控制不用js

.net页面上有三个RadioButton（服务器控件），控制下面三个层的隐藏和显示，也就是选中一个隐藏另外两个