zoukankan      html  css  js  c++  java
  • CSS隐藏元素的方法

    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

    使用positionoverflow属性的意义就是把元素脱离文档流移出视觉区域,超出屏幕显示的部分隐藏掉,使用这两个属性隐藏主要就是通过控制方向topleftrightbottom达到一定的值,离开当前显示区域并将超出部分裁剪,此外在未隐藏时设定好相关样式,在动态添加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

    类似于positionoverflow的组合,使用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{
                 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
    
  • 相关阅读:
    BZOJ5212 ZJOI2018历史(LCT)
    BZOJ5127 数据校验
    253. Meeting Rooms II
    311. Sparse Matrix Multiplication
    254. Factor Combinations
    250. Count Univalue Subtrees
    259. 3Sum Smaller
    156. Binary Tree Upside Down
    360. Sort Transformed Array
    348. Design Tic-Tac-Toe
  • 原文地址:https://www.cnblogs.com/WindrunnerMax/p/13091710.html
Copyright © 2011-2022 走看看