元素隐藏的七种方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏元素的方法</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        
        body>div:nth-child(1) {
            /* 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件 */
            display: none;
        }
        
        body>div:nth-child(2) {
            /*  元素在页面中仍占据空间，但是不会响应绑定的监听事件*/
            visibility: hidden;
        }
        
        body>div:nth-child(3) {
            /* 将元素的透明度设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件 */
            opacity: 0;
        }
        
        body>div:nth-child(4) {
            /* 通过使用绝对定位将元素移除可视区域内，以此来实现元素隐藏 */
            position: absolute;
            /* position: relative; */
            /* position: absolute;不占据空间
               position: relative;占据空间
             */
            width: 200px;
            left: -999999px;
            top: -999999px;
            background: gold;
        }
        
        body>div:nth-child(5) {
            /*使用其他元素遮盖该元素，以此来实现隐藏  */
            /* z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
            ***元素可拥有负的z-index属性值
            ***z-index仅能在定位元素上奏效(position:absolute)
            ***默认的z-index是0
            */
            position: absolute;
            z-index: -1;
            background: blue;
        }
        
        body>div:nth-child(6) {
            background: greenyellow;
        }
        
        body>div:nth-child(7) {
            /* 使用元素裁剪的方法来实现元素的隐藏,这种方法下，元素仍在页面中占据位置，但是不会影响绑定的监听事件 */
            clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
            background: hotpink;
        }
        
        body>div:nth-child(8) {
            /* 将元素缩放为0，来实现元素的隐藏。 这种方法下，元素仍在页面中占据位置，但不会影响绑定的监听事件*/
            transform: scale(0, 0);
        }
    </style>
</head>

<body>
    <div onclick="div1()">1</div>
    <div onclick="div2()">2</div>
    <div onclick="div3()">3</div>
    <div onclick="div4()">4</div>
    <div onclick="div5()">5</div>
    <div>6</div>
    <div onclick="div7()">7</div>
    <div onclick="div8()">8</div>
    <div>9</div>
    <script>
        let div1 = () => {
            alert("div1")
        }
        let div2 = () => {
            alert("div2")
        }
        let div3 = () => {
            alert("div3")
        }
        let div4 = () => {
            alert("div4")
        }
        let div5 = () => {
            alert("div5")
        }
        let div7 = () => {
            alert("div7")
        }
        let div8 = () => {
            alert("div8")
        }
    </script>
</body>

</html>
元素隐藏的七种方法

推荐阅读更多精彩内容
