display:none/block的应用以及和visibility的区别，隐藏/显示内容

最新推荐文章于 2022-04-01 11:40:23 发布

like-Betty

最新推荐文章于 2022-04-01 11:40:23 发布

阅读量4k

点赞数

分类专栏： js简单实现

本文链接：https://blog.csdn.net/u012309349/article/details/49384007

版权

js简单实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            border: 1px solid red;
        }
        #list{
            display: none;
        }
    </style>
</head>
<body>
    <p><span>+</span>&nbsp;家庭成员</p>
    <ul id="list">
        <li>爸爸</li>
        <li>妈妈</li>
        <li>弟弟</li>
    </ul>
    <script>
    var indi = document.getElementsByTagName("span")[0];
    var list = document.getElementById("list");
    indi.onclick = function(){
        if(indi.innerHTML == "+"){
            list.style.display = "block";
            indi.innerHTML = "-";
        }else{
            list.style.display = "none";
            indi.innerHTML = "+";
        }
    }
    </script>
</body>
</html>

style.visibility和style.display都可以实现对页的隐藏，但visibility要占用域的空间，而display则不占用:
- 将元素display属性设为 block，会在该元素后换行。
- 将元素display属性设为 inline，会消除元素换行.
- 将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。
- 将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。
- 将元素visibility属性设为 visible，显示元素内容。
  1. 如果是点击元素实现对应区域的内容切换效果，采用display属性，如果使用visibility,设置为visibility:hidden;属性的元素即使隐藏也占据原本的空间，这样其之后的元素将无法上移。举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            color: black;
        }
        #div{
            width: 270px;
            height: 170px;
            margin: 0px auto;
        }
        ul li{
            list-style-type: none;
        }
        #nav{
            float: left;
            width: 50px;
            height: 170px;
        }
        #nav ul li{
            height: 50px;
            background-color: silver;
            line-height: 50px;
            text-align: center;
            margin: 5px;
        }
        #music,#books{
            width: 200px;
            height: 170px;
            float: left;
            margin: 10px;
        }
        #books{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="div">
        <div id="nav">
            <ul>
                <li onmouseover="change('musicli')">音乐</li>
                <li onmouseover="change('booksli')">书籍</li>
            </ul>
        </div>
        <div id="music">
            <ul>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
                <li>音乐。。。。。。。。。。</li>
            </ul>
        </div>  
        <div id="books">
            <ul>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
                <li>书籍。。。。。。。。。。</li>
            </ul>
        </div>
    </div>
    <script>
    var music = document.getElementById("music");
    var books = document.getElementById("books");
    function change(obj){           
            if(obj == "musicli"){
                music.style.visibility = "visible";
                books.style.visibility = "hidden";
            }else if(obj == "booksli"){
                books.style.visibility = "visible";
                music.style.visibility = "hidden";
            }
        }
    </script>
</body>
</html>