Maison >interface Web >Questions et réponses frontales >Quels sont les moyens de contrôler le masquage des éléments en CSS3
Quels sont les moyens de contrôler le masquage des éléments en CSS3
- 青灯夜游original
- 2022-01-13 13:49:061593parcourir
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.
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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第二种：隐藏元素
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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第三种：透明
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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第四种：缩放
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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>width: 0;height: 0;overflow: hidden
<!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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>Deuxième : élément caché
visibilité : cachéeDé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. <!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('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
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
transparentCode : 🎜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!
Déclaration：
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
Article précédent：Que signifient les pseudo-classes et pseudo-éléments CSS3 ?Article suivant：Que signifient les pseudo-classes et pseudo-éléments CSS3 ?
Articles Liés
Voir plus- Comment obtenir un dégradé linéaire d'arrière-plan en CSS3
- Qu'est-ce que CSS3 utilise pour représenter les sélecteurs descendants ?
- Comment implémenter une animation qui disparaît après quelques secondes en CSS3
- Propriété clip-path CSS3 en action : recadrage de zone dynamique
- Quelles sont les propriétés associées à l'animation CSS3 ?