div的显示和隐藏

最新推荐文章于 2023-09-14 18:51:30 发布

夏虫语冰彡

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量586

点赞数

文章标签：对象 div的显示和隐藏不占位显示全部按钮功能

本文链接：https://blog.csdn.net/qq_34283987/article/details/77970488

版权

不占位

1.隐藏，div对象.style.display = “none”;
2.显示，div对象.style.display=”block”;
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div.divClass1{
                width:200px;
                height:200px;
                background-color: #9ACD32;
            }

            div.divClass2{
                width:200px;
                height:200px;
                background-color: yellow;
                display:none;
            }
        </style>
        <script type="text/javascript">
            function getStyleObject (domObject) {
                var styleObject = null;

                if(domObject.currentStyle){ //IE
                    styleObject = domObject.currentStyle;
                }else {
                    styleObject = window.getComputedStyle(domObject,null);
                }
                return styleObject;
            }

            function test () {
                //让div2显示
                var div2 = document.getElementById("div2");

                var styleObject = getStyleObject(div2);
                var btn1 = document.getElementById("btn1");
                if(styleObject.display=="none"){//div2是隐藏的
                    //显示
                    div2.style.display="block";
                    //让按钮的文字变成隐藏
                    btn1.value="隐藏";
                }else{
                    //隐藏
                    div2.style.display="none";
                    btn1.value="显示";
                }


                //隐藏

            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="显示" onclick="test();"/>
        <div class="divClass1">
            默认显示的内容
        </div>
        <div id="div2" class="divClass2">
            不太常用的内容
        </div>
        其他内容
    </body>
</html>

点击时，第一次不能正常显示，需要点第二次，为什么？原因：内嵌样式设置了div的display:none,在js代码中无法获得内嵌样式display，期望得到none,却得到“”，所以出现问题。
解决：写一个获得display的函数获得内嵌央视的display对象，打印出none即获得。

占位

1.隐藏，div对象.style.visibility = “hidden”;
2.显示，div对象.style.visibility = “visible”;

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div.divClass1{
                width:200px;
                height:200px;
                background-color: #9ACD32;
            }

            div.divClass2{
                width:200px;
                height:200px;
                background-color: yellow;
                visibility: hidden;
            }
        </style>
        <script type="text/javascript">
            function getStyleObject (domObject) {
                var styleObject = null;

                if(domObject.currentStyle){ //IE
                    styleObject = domObject.currentStyle;
                }else {
                    styleObject = window.getComputedStyle(domObject,null);
                }
                return styleObject;
            }

            function test () {
                //让div2显示
                var div2 = document.getElementById("div2");

                var styleObject = getStyleObject(div2);
                var btn1 = document.getElementById("btn1");
                if(styleObject.visibility=="hidden"){//div2是隐藏的
                    //显示
                    div2.style.visibility="visible";
                    //让按钮的文字变成隐藏
                    btn1.value="隐藏";
                }else{
                    //隐藏
                    div2.style.visibility="hidden";
                    btn1.value="显示";
                }


                //隐藏

            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="显示" onclick="test();"/>
        <div class="divClass1">
            默认显示的内容
        </div>
        <div id="div2" class="divClass2">
            不太常用的内容
        </div>
        其他内容
    </body>
</html>

夏虫语冰彡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div的显示和隐藏

不占位1.隐藏，div对象.style.display = “none”; 2.显示，div对象.style.display=”block”; 示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
复制链接

扫一扫