CSS隐藏元素的方法

使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);、height: 0; overflow: hidden;。

diaplay

display: none;属性依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。

<style type="text/css">

    .display-hide{

        display: none;

    }

</style>

<section>

    <div id="t1"></div>

</section>

<script type="text/javascript">

    document.getElementById("t1").addEventListener("click", e => {

        alert("第一次点击会隐藏，此后再也无法点击");

        e.srcElement.classList.add("display-hide");

    })

</script>

opacity

opacity是用以设置透明度的属性，将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果。对于opacity属性，可以利用其透明的视觉效果制作点击劫持攻击。

<style type="text/css">

    .opacity-hide{

        opacity: 0;

    }

</style>

<section>

    <div id="t2">opacity</div>

</section>

<script type="text/javascript">

    document.getElementById("t2").addEventListener("click", e => {

        alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");

        e.srcElement.classList.add("opacity-hide");

    })

</script>

visibility

当visibility属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与opacity不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的visibility被设置为visible而父元素的visibility设置为hidden，子元素依旧可以显示而父元素会被隐藏。

<style type="text/css">

    .visibility-hide{

        visibility: hidden;

    }

</style>

<section>

    <div id="t3">

        <div>visibility</div>

        <div style="visibility: visible; color: #000;">still show</div>

    </div>

</section>

<script type="text/javascript">

    document.getElementById("t3").addEventListener("click", e => {

        alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");

        e.srcElement.classList.add("visibility-hide");

    })

</script>

position

使用position与overflow属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉，使用这两个属性隐藏主要就是通过控制方向top、left、right、bottom达到一定的值，离开当前显示区域并将超出部分裁剪，此外在未隐藏时设定好相关样式，在动态添加class时即可实现过渡动画。

<style type="text/css">

    body{

        overflow: hidden;

    }

    .posistion-origin{

        position: absolute;

        left: 5px;

        top: 5px;

    }

    .position-hide{

        left: -150px;

    }

</style>

<section style="position: relative;height: 115px;">

    <div id="t4" class="posistion-origin" >position</div>

</section>

<script type="text/javascript">

    document.getElementById("t4").addEventListener("click", e => {

        alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");

        e.srcElement.classList.add("position-hide");

    })

</script>

clip-path

clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，直接将元素裁剪之后即可实现隐藏效果，该属性兼容性一般，具体可以查阅https://caniuse.com/#search=clip-path。

<style type="text/css">

    .clip-path-hide{

        clip-path: polygon(0 0, 0 0, 0 0, 0 0);

    }

</style>

<section>

    <div id="t5" >clip-path</div>

</section>

<script type="text/javascript">

    document.getElementById("t5").addEventListener("click", e => {

        alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");

        e.srcElement.classList.add("clip-path-hide");

    })

</script>

height

类似于position与overflow的组合，使用height: 0;将元素高度设置为0，使用overflow: hidden将超出部分裁剪隐藏，即可实现隐藏效果，如果需要使用这两个属性制呈现过渡动画的话，需要将height给予一个确定的值，不能是auto。

<style type="text/css">

    .height-hide{

        height: 0 !important;

        overflow: hidden;

    }

</style>

<section>

    <div id="t6" >height</div>

</section>

<script type="text/javascript">

    document.getElementById("t6").addEventListener("click", e => {

        alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");

        e.srcElement.classList.add("height-hide");

    })

</script>

代码示例

<!DOCTYPE html>

<html>

<head>

    <title>隐藏元素</title>

    <style type="text/css">

        body{

            overflow: hidden;

        }

        section > div:first-child{

            width: 100px;

            height: 100px;

            background-color: blue;

        }

        section{

            border-bottom: 1px solid #eee;

            padding: 5px;

            box-sizing: border-box;

        }

        div{

            color: #fff;

            transition: all .3s;

        }

        .display-hide{

            display: none;

        }

        .opacity-hide{

            opacity: 0;

        }

        .visibility-hide{

            visibility: hidden;

        }

        .posistion-origin{

            position: absolute;

            left: 5px;

            top: 5px;

        }

        .position-hide{

            left: -150px;

        }

        .clip-path-hide{

            clip-path: polygon(0 0, 0 0, 0 0, 0 0);

        }

        .height-hide{

            height: 0 !important;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <section>

        <div id="t1">display</div>

    </section>

    <section>

        <div id="t2">opacity</div>

    </section>

    <section>

        <div id="t3">

            <div>visibility</div>

            <div style="visibility: visible; color: #000;">still show</div>

        </div>

    </section>

    <section style="position: relative;height: 115px;">

        <div id="t4" class="posistion-origin" >position</div>

    </section>

    <section>

        <div id="t5" >clip-path</div>

    </section>

    <section>

        <div id="t6" >height</div>

    </section>

</body>

    <script type="text/javascript">

        document.getElementById("t1").addEventListener("click", e => {

            alert("第一次点击会隐藏，此后再也无法点击");

            e.srcElement.classList.add("display-hide");

        })

        document.getElementById("t2").addEventListener("click", e => {

            alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");

            e.srcElement.classList.add("opacity-hide");

        })

        document.getElementById("t3").addEventListener("click", e => {

            alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");

            e.srcElement.classList.add("visibility-hide");

        })

        document.getElementById("t4").addEventListener("click", e => {

            alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");

            e.srcElement.classList.add("position-hide");

        })

        document.getElementById("t5").addEventListener("click", e => {

            alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");

            e.srcElement.classList.add("clip-path-hide");

        })

        document.getElementById("t6").addEventListener("click", e => {

            alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");

            e.srcElement.classList.add("height-hide");

        })

    </script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.cnblogs.com/jing-tian/p/10969109.html

https://blog.csdn.net/cuo9958/article/details/53559826

https://blog.csdn.net/weixin_41910848/article/details/81875725