Quels sont les moyens de contrôler le masquage des éléments en CSS3

青灯夜游
Libérer: 2022-01-13 13:49:06
original
1580 Les gens l'ont consulté

Méthode de contrôle : 1. Utilisez l'instruction "display:none" pour supprimer l'élément de l'arborescence d'accessibilité afin de masquer l'élément ; 2. Utilisez l'instruction "visibility: Hidden" pour définir l'élément comme étant invisible ; opacity: 0" " L'instruction définit l'élément comme étant transparent ; 4. Laissez l'élément s'éloigner de la position d'affichage à l'écran, etc.

Quels sont les moyens de contrôler le masquage des éléments en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment CSS3 contrôle le masquage des éléments

Première façon : supprimer l'arborescence d'accessibilité

display : nonedisplay : none

display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                display : none;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

第二种:隐藏元素

visibility: hidden

将visibility设置为hidden会使元素不可见,但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 ),注册点击事件无效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>visibility: hidden</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

第三种:透明

opacity: 0

opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明),将opacity设置为0会使元素完全透明,此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>opacity: 0</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

transparent

将元素的background-color、color和border-color设置为transparent(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transparent</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: transparent;
                background-color: transparent;
                border-color: transparent;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

rgba(0,0,0,0)

从技术上说,transparent是 rgba(0,0,0,0) 的简写,将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>rgba(0,0,0,0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: rgba(0,0,0,0);
                background-color: rgba(0,0,0,0);
                border-color: rgba(0,0,0,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

rgba只需要第四个参数为0即可达到隐藏元素的效果。

hsla(0,0%,0%,0)

hsla使用元素隐藏的机制与rgba一致,都是由第四个参数Alpha所控制的,将元素的background-color、color和border-color设置为hsla(0,0%,0%,0),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>hsla(0,0%,0%,0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: hsla(0,0%,0%,0);
                background-color: hsla(0,0%,0%,0);
                border-color: hsla(0,0%,0%,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

hsla和rgba一致,只需要第四个参数为0即可达到隐藏元素的效果。

filter: opacity(0%)

filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>filter: opacity(0%)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                filter: opacity(0%);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

第四种:缩放

transform: scale(0, 0)

将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素,此元素会显示,也会占用位置,但是因为已经缩放到0%,元素和内容占用像素比为0*0,所以看不到此元素及其内容,也无法点击。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: scale(0, 0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                transform: scale(0,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

width: 0;height: 0;overflow: hidden

L'attribut display peut définir le type d'affichage interne et externe du élément . Définir display sur none supprimera l’élément de l’arborescence d’accessibilité.

Code :
    <!DOCTYPE html>
    <html>
        <head>
            <meta name="charset" content="utf-8"/>
            <title>width: 0;height: 0;overflow: hidden</title>
            <style type="text/css">
                p {
                    background-color: red;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                    margin-top: 24px;
                }
                button {
                    background-color: black;
                    color: white;
                }
                #bt {
                    width:0;
                    height:0;
                    overflow: hidden;
                    border-width: 0;/* user agent stylesheet中border-width: 2px; */
                    padding: 0;/* user agent stylesheet中padding: 1px 6px; */
                }
            </style>
        </head>
        <body>
            <p>
                <button id="normal">按钮</button>
            </p>
            <p>
                <button id="bt">按钮</button>
            </p>
    
            <script type="text/javascript">
                let normal = document.getElementById(&#39;normal&#39;);
                let bt = document.getElementById(&#39;bt&#39;);
                normal.addEventListener(&#39;click&#39;,function(){
                    alert(&#39;click normal&#39;);   
                })
                bt.addEventListener(&#39;click&#39;,function(){
                    alert(&#39;click bt&#39;);   
                })
            </script>
        </body>
    </html>
    Copier après la connexion
  • Deuxième : élément caché

  • visibilité : cachée

    Définir la visibilité sur caché rendra l'élément invisible, mais l'élément est toujours dans l'arborescence d'accessibilité à ce moment ( l'élément est déplacé hors de l'arborescence d'accessibilité lorsque affichage : aucun), l'enregistrement des événements de clic n'est pas valide.
Code :

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>脱离屏幕显示位置</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                position: fixed;
                top: -100px;
                left: -100px;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>
Copier après la connexion

Troisième type : Transparent

opacité : 0

opacité (opacité), plage de valeurs 0 (complètement transparent) ~ 1 (complètement opaque), définira l'opacité sur 0 rend l'élément complètement transparent, auquel cas l'élément n'est pas visible (car il est transparent), est toujours dans l'arborescence d'accessibilité et l'enregistrement des événements de clic est valide.

Code :

rrreee

transparent

Définissez la couleur d'arrière-plan, la couleur et la couleur de la bordure de l'élément sur transparent (transparent). À ce stade, l'élément n'est pas visible (car il l'est). transparent), toujours situé dans l'arborescence d'accessibilité, l'enregistrement des événements de clic est valide.

Code : 🎜rrreee🎜rgba(0,0,0,0)🎜🎜Techniquement parlant, transparent est l'abréviation de rgba(0,0,0,0), qui change l'arrière-plan de les éléments -color, color et border-color sont définis sur rgba(0,0,0,0) (transparent). Pour le moment, l'élément n'est pas visible (car il est transparent) et est toujours dans l'arborescence d'accessibilité. . L'enregistrement des événements de clic est valide. 🎜🎜Code : 🎜rrreee🎜rgba n'a besoin que que le quatrième paramètre soit 0 pour obtenir l'effet de cacher des éléments. 🎜🎜hsla(0,0%,0%,0)🎜🎜hsla utilise le même mécanisme de masquage d'éléments que rgba, qui est contrôlé par le quatrième paramètre Alpha : couleur d'arrière-plan, couleur et. border-color est défini sur hsla(0,0%,0%,0), auquel cas l'élément n'est pas visible (car il est transparent), est toujours dans l'arborescence d'accessibilité et l'enregistrement des événements de clic est valide. 🎜🎜Code : 🎜rrreee🎜hsla est le même que rgba. Seul le quatrième paramètre est 0 pour obtenir l'effet de masquage des éléments.
🎜🎜filtre : opacité(0%)🎜🎜filtre (filtre) opacité (0% ~ 100%) convertit la transparence de l'image, la plage de valeurs est de 0% (complètement transparente ) ~ 100 % (entièrement opaque). Définissez le filtre de l'élément sur l'opacité (0 %). À ce stade, l'élément est invisible (car transparent) et est toujours dans l'arborescence d'accessibilité. L'enregistrement des événements de clic est effectif. 🎜🎜Code : 🎜rrreee🎜🎜Quatrième : Scale🎜🎜🎜transform: scale(0, 0)🎜🎜Définir la transformation sur scale(0, 0) rendra l'élément sur l'axe des x et L'axe y est mis à l'échelle à 0 pixel. Cet élément sera affiché et occupera la position. Cependant, comme il a été mis à l'échelle à 0 %, le rapport de pixels occupé par l'élément et le contenu est de 0*0, donc cet élément et son. le contenu ne peut pas être vu et ne peut pas cliquer. 🎜🎜Code : 🎜rrreee🎜largeur : 0;hauteur : 0;débordement : caché🎜🎜Définissez la largeur et la hauteur sur 0, de sorte que le rapport de pixels occupé par l'élément soit de 0*0, mais à ce moment, deux situations se produiront : 🎜🎜🎜🎜Lorsque l'attribut d'affichage de l'élément est en ligne, le contenu de l'élément étendra la largeur et la hauteur de l'élément 🎜🎜🎜🎜Lorsque l'attribut d'affichage de l'élément est bloc ou ; inline-block, la largeur et la hauteur de l'élément sont 0 , mais le contenu de l'élément est toujours affiché normalement, l'ajout de overflow:hidden; 🎜🎜🎜🎜La différence entre cette méthode et transform: scale(0,0) est que transform: scale(0,0) met à l'échelle à la fois l'élément et le contenu, tandis que cette méthode redimensionne l'élément à 0px puis le recadre. contenu en dehors de l’élément. 🎜🎜Code : 🎜rrreee🎜🎜La cinquième méthode : Position d'affichage hors écran🎜🎜🎜La position d'affichage hors écran peut également rendre l'élément invisible, mais il y a trop de styles CSS pour obtenir cet effet. Voici seulement un exemple de. une situation. 🎜🎜Code : 🎜rrreee🎜 (Partage vidéo d'apprentissage : 🎜Tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal