Comment masquer des éléments en CSS3 (deux méthodes)

La technologie cachée CSS3 vous permet de contrôler efficacement la mise en page et l'affichage du contenu

Dans la production de pages Web, CSS3 fournit de nombreuses excellentes technologies, permettant aux développeurs de contrôler de manière plus flexible la mise en page et l'affichage du contenu des pages Web. Parmi eux, la technologie de masquage CSS3 est une technologie très importante qui vous permet de masquer certains contenus qui n'ont pas besoin d'être affichés sur la page Web, rendant ainsi la page plus concise et claire et offrant une meilleure expérience utilisateur.

1. Présentation

Dans les pages Web, masquer des éléments est une opération courante, généralement parce que la page doit afficher dynamiquement le contenu en fonction de différentes situations, ou doit obtenir des effets de style spéciaux. Bien entendu, si vous souhaitez masquer un élément dans une page Web, l’approche traditionnelle consiste à définir son attribut d’affichage sur none. Cependant, bien que cette méthode puisse avoir pour effet de masquer des éléments, l'élément masqué sera complètement supprimé de la page et l'espace de mise en page qu'il occupe disparaîtra également. S'il doit être affiché ultérieurement, la mise en page devra être reconstruite. Causer des ennuis inutiles.

CSS3 fournit deux attributs, visibilité et opacité, qui peuvent masquer des éléments sans les supprimer de la page. Les deux propriétés contrôlent la transparence d'un élément, mais leurs effets sont légèrement différents. L'attribut de visibilité peut masquer un élément et conserver son espace de mise en page ; tandis que l'attribut d'opacité peut contrôler la transparence d'un élément, en conservant son espace de mise en page même s'il est invisible.

2. Comment utiliser

① Utilisez l'attribut de visibilité pour masquer

Vous pouvez définir l'attribut de visibilité de l'élément sur masqué ou réduit. Parmi eux, caché signifie masquer l'élément et conserver son espace de mise en page sur la page ; l'effondrement n'est applicable qu'aux éléments du tableau, indiquant le masquage des colonnes ou des lignes et l'élimination de son espace de mise en page sur la page.

Par exemple, voici un exemple de code qui masque un élément puis l'affiche :

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

Dans cet exemple de code, définissez d'abord l'attribut de visibilité de l'élément cible sur masqué, mais son espace de mise en page est toujours conservé dans la page. . Vous pouvez ensuite réafficher l'élément sur la page en définissant sa propriété de visibilité sur visible via JavaScript.

②. Utilisez l'attribut opacité pour masquer

Pour utiliser l'attribut opacité pour masquer un élément, la transparence de l'élément doit être définie sur 0. De cette façon, même si l'élément n'est pas visible, son espace de mise en page est conservé sur la page. De même, vous pouvez définir la transparence de l'élément sur 1 via JavaScript, en le réaffichant sur la page.

Par exemple, voici un exemple de code qui masque un élément puis l'affiche :

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

Dans cet exemple de code, définissez d'abord l'attribut d'opacité de l'élément cible sur 0, afin qu'il soit masqué et reste sur la page. espace de mise en page activé. Vous pouvez ensuite afficher à nouveau l'élément en définissant sa propriété d'opacité sur 1 via JavaScript.

3. Résumé

Dans la production de pages Web, masquer des éléments est une opération très courante. La méthode traditionnelle de masquage d’éléments entraîne généralement des problèmes inutiles de mise en page, de style et d’autres problèmes sur la page. La technologie de masquage CSS3 fournit deux attributs, la visibilité et l'opacité, qui peuvent masquer des éléments et conserver leur espace de mise en page, obtenant ainsi une mise en page et un effet d'affichage du contenu plus efficaces et plus simples.

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!