réglage de la visibilité par rapport à masquer / afficher

Quelle est la différence entre element.css('visibility', 'visible') et element.show() . En outre, quelle est la différence entre element.css('visibility', 'hidden') et element.hide() ?

Mise à jour : En outre, quel est le moyen le plus approprié de masquer un élément et la sous-arborescence de tous ses éléments?

Mise à jour N2 : Quelle est la bonne façon de savoir si un élément (et son sous-arbre) est visible: element.is(':visible') ou element.css('visibility') ?

Mise à jour N3 : Y a-t-il un moyen de masquer (complètement) un élément, mais il restra néanmoins l’espace / la zone sur la page du navigateur? (autant que je sache – la bonne façon serait d’appeler hide() mais cela pourrait conduire à une restructuration visuelle de la page.

Visibility réservera toujours l’espace dans votre navigateur.

Un élément masqué est configuré pour display: none ainsi tout l’espace occupé par cet élément est réduit. Si vous définissez uniquement l’élément sur visibility: hidden l’élément devient transparent mais l’espace est occupé comme si l’élément y était toujours.

.hide() est égal à .css('display', 'none')
.show() est égal à .css('display', 'block') – je suis presque sûr que jQuery fait de la magie ici pour décider si c’est vraiment un block qui devrait y entrer mais c’est un peu égal.

@Mettre à jour:
Une fois que vous cachez un élément avec .hide() (ou .css('display', 'none') ), tous les éléments de l’arbre de dom qui sont des enfants de cet élément seront également masqués.

@Mise à jour 2:
Si vous utilisez .hide() et .show() c’est .is(':visible') Si vous utilisez l’atsortingbut css de visibilité, alors .css('visibility')

@Mise à jour 3:
C’est exactement ce que fait .css('visibility', 'hidden') , il masque l’élément sans la restructuration de la page. .hide() va complètement “enlever” l’élément.

jquery.hide () équivaut à appeler .css('display', 'none') et et jquery.show équivaut à appeler .css('display', 'block')

La méthode .css() fait que définir la propriété de visibilité.

Du sharepoint vue de la différence de css:

 visbility : hidden

La valeur masquée rend les zones générées invisibles sans les supprimer de la présentation . Les boîtes de descendance peuvent être rendues visibles. Regarde ça

 display : none

Si la valeur est none, l’élément ne génère aucune boîte. Les boîtes de descendance ne peuvent pas non plus générer de boîtes, même si leur propriété d’affichage est définie sur autre chose que aucune. Regarde ça

Avec hidden l’élément est toujours généré.

pris de w3c:

visibilité: cache un élément, mais il occupera toujours le même espace qu’auparavant. L’élément sera caché, mais affectera toujours la mise en page.

display: aucun ne cache un élément, et il ne prendra aucune place. L’élément sera masqué et la page s’affichera car l’élément n’y est pas:

En plus de l’explication de bardiir, voici une bonne démo de “display: none” et “visibilité: hidden” http://www.w3schools.com/css/css_display_visibility.asp

“supprimer” les ensembles de boutons “display: none” et “masquer” les ensembles de boutons “visibilité: masqué”.

Ils définissent 2 propriétés css différentes: hide / show définit la propriété display sur none , show supprime ce paramètre de sorte que la valeur par défaut soit utilisée (par exemple, “block” pour un div).

La différence, comme le soulignent les autres réponses, est que l’appel de l’ hide sur un élément signifie que celui-ci (et tous ses ancêtres) ne prendra aucune place. Définir la visibility sur hidden rendra les éléments totalement transparents (tout en prenant de la place).

Pour des réponses à vos modifications:

Masquer tous les ancêtres (cela se fait automatiquement avec les deux méthodes).
Utilisez element.is(':visible') car ceci vérifie les propriétés de visibility et d’ display et pour voir si la height et la width ne sont pas égales à 0, il le fait également de manière récursive sur les ancêtres, alors que element.css('visibility') vous indique simplement la visibility de l’élément.
Paramétrer element.css('visibility', 'hidden') fera ceci – n’appelant pas element.hide() .