J'utilise visibility:hiddenpour masquer certains éléments, mais ils occupent toujours de l'espace sur la page lorsqu'ils sont masqués.
Comment puis-je les faire disparaître totalement visuellement, comme s'ils n'étaient pas du tout dans le DOM (mais sans les supprimer réellement du DOM)?
Réponses:
Essayez de définir display:nonepour masquer et définir display:blockpour afficher.
display: block, certains devront être définis sur display: inline(tels que les éléments <span>ou <a>ou <img>DOM).
hiddenavec display: none. Ajoutez la classe à un élément pour le masquer, supprimez-le show. Lors de sa suppression, la displaypropriété est restaurée à l'élément par défaut.
Utiliser display:noneest une bonne option pour supprimer simplement un élément MAIS il sera également supprimé pour les lecteurs d'écran . Il y a aussi des discussions si cela affecte le référencement. Il y a un bon article court sur ce sujet dans A List Apart
Si vous voulez vraiment juste cacher et ne pas supprimer un élément, mieux vaut utiliser:
div {
position: absolute;
left: -999em;
}Comme cela, il peut également être lu par des lecteurs d'écran.
Le seul inconvénient de cette méthode est que ce DIV est réellement rendu et qu'il peut affecter les performances , en particulier sur les téléphones mobiles.
visibility: hidden;, disons que vous avez d'autres éléments absolus, ils n'auront pas de conflit pour l'espace, juste un conflit de z-index. Juste pour cacher un élément avec visibility
Regardez, au lieu d'utiliser visibility: hidden;use display: none;. La première option se cache mais prend toujours de l' espace et la deuxième option se cache et ne prend pas d'espace.
La réponse à cette question consiste à utiliser display: none et display: block, mais cela n'aide pas quelqu'un qui essaie d'utiliser des transitions css pour afficher et masquer du contenu à l'aide de la propriété de visibilité.
Cela m'a également rendu fou, car l'utilisation de l'affichage tue toutes les transitions CSS.
Une solution consiste à ajouter ceci à la classe qui utilise la visibilité:
overflow:hiddenPour que cela fonctionne, cela dépend de la mise en page, mais il doit conserver le contenu vide dans le div dans lequel il réside.
affichage: aucun n'est une solution, cela cache complètement les éléments avec son espace.
display:noneetvisibility: hiddenvisibility:hidden signifie que la balise n'est pas visible, mais de l'espace lui est alloué sur la page.
display:nonesignifie cache complètement les éléments avec son espace. (bien que vous puissiez toujours interagir avec lui via le DOM)
Le basculement displayne permet pas des transitions CSS fluides. Au lieu de cela, basculez à la fois sur visibilityet sur max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Nous ne voulons pasdisplay: none
display:noneà masquer et display:blockà afficher.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenarrête uniquement l'affichage du contenu mais utilise toujours l'espace vertical / horizontal, display: aucun supprime l'espace vertical / horizontal pour l'élément.
voici une approche différente de leur remise après affichage: aucune. n'utilisez pas display: block / inline etc.
au-dessus de mes connaissances, il est possible de 4 façons
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, etdisplay:noneje mettrais leoffsetTopà 0. Ma solution ici était d'utiliservisibility: hiddenpuis de définir la largeur et la hauteur à 0. Une fois que je devais rendre l'élément visible à nouveau, j'ai supprimé les trois attributs en utilisant Javascript. Un peu d'une solution hacky, mais cela fonctionne bien pour à peu près tous les cas d'utilisation.