js控制div点击隐藏显示

最新推荐文章于 2022-08-08 14:25:36 发布

原创最新推荐文章于 2022-08-08 14:25:36 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/"/>
    <title>点击切换</title>
    <style type="text/css">
        #thediv {
            width: 200px;
            height: 50px;
            background: #ccc;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var obt = document.getElementById("bt");
            var odiv = document.getElementById("thediv");

            function getStyle(obj, attr) {  //  谁的      那个属性
                if (obj.currentStyle)  // ie 等
                {
                    return obj.currentStyle[attr];
                }
                else {
                    return window.getComputedStyle(obj, null)[attr];  // w3c 浏览器
                }
            }
            //console.log(getStyle(odiv, 'display'));
            obt.onclick = function () {
                //获取的样式需要写在点击事件里面，写在外面只能获取一次，不能动态获取，
                if (getStyle(odiv, 'display') == "none") {
                    odiv.style.display = "block";
                    obt.value = "隐藏模块";
                }
                else {
                    odiv.style.display = "none";
                    obt.value = "显示模块";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv"></div>
</body>
</html>

以上为第一种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/"/>
    <title>点击切换</title>
    <style type="text/css">
        #thediv {
            width: 200px;
            height: 50px;
            background: #ccc;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var obt = document.getElementById("bt");
            var odiv = document.getElementById("thediv");
            obt.onclick = function () {
                if (odiv.style.display== "block") {
                    //第一判断时将none改为block即可避免第一次点击无效的问题
                    odiv.style.display = "none";
                    obt.value = "显示模块";
                }
                else {
                    odiv.style.display = "block";
                    obt.value = "隐藏模块";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv"></div>
</body>
</html>

以上为第二种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
        #thediv{
            width:200px;
            height:50px;
            background:#ccc;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var obt=document.getElementById("bt");
            var odiv=document.getElementById("thediv");
            obt.onclick=function(){
                if(odiv.style.display=="none"){
                    odiv.style.display="block";
                    obt.value="隐藏模块";
                }
                else{
                    odiv.style.display="none";
                    obt.value="显示模块";
                }
            }
        }
    </script>
<body>
<input type="button" id="bt" value="显示模块"/>
<div id="thediv" style="display:none"></div>
</body>
</html>

以上为第三种