web-dev-qa-db-fra.com

Rendre DIV invisible en CSS et JavaScript

J'ai réussi à rendre une balise DIV invisible en JavaScript en définissant l'affichage sur aucun et la visibilité sur caché. Il peut également être atteint avec cette classe:

.invisible {
    display: none;
    visibility: hidden;
}

Afficher aucun garantit que la boîte DIV est vide et la visibilité masquée garantit qu'elle n'est pas visible. Le problème avec cette méthode est lorsque j'ai des DIV ou des zones de texte défilantes avec un contenu débordant, lorsque vous définissez l'affichage: aucun, certains navigateurs oublieront la position de défilement de ces éléments. Existe-t-il un meilleur moyen de rendre un DIV invisible sans utiliser la propriété d'affichage? Je préfère ne pas utiliser JavaScript pour enregistrer la position de défilement et autres si possible.

MODIFIER:

J'ai réussi à le résoudre avec votre aide, j'ai appliqué ce qui suit:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

J'ai essayé à gauche: -9999px, mais cela élargit la barre de défilement verticale dans IE ... J'ai également enveloppé ma zone de texte dans une autre DIV et appliqué les styles visible/invisible à cela, car la zone de texte perdrait sa position de défilement autrement. J'ai testé cela dans Chrome, Firefox, IE et Safari sur mon iPhone. Juste une note, la DIV enroulée autour de la zone de texte ne semble pas aider dans FF, et la barre de défilement est toujours réinitialisée. Mais les DIVs défilables vont bien maintenant. Merci pour votre aide!

javascriptcsshtmlinvisible
19
Aram Kocharyan

Cela fonctionnerait probablement:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: Je voudrais jeter un œil aux aides courantes dans le code HTML5 Boilerplate pour explorer d'autres façons de faire disparaître les choses.

8
Bryan Downing

Vous pouvez simplement utiliser visibility:hidden si vous voulez que l'élément soit invisible mais restitué. display:none le supprimera entièrement et provoquera le comportement de défilement que vous avez mentionné.

23
Chris Van Opstal

Vous pouvez utiliser une méthode JQuery hide (). $ ('# DivID'). Hide (); a $ ('. Div Class'). hide ();

5
Ali

Vous pouvez utiliser jQuery pour obtenir la solution. Si vous voulez masquer/afficher totalement le div, alors vous pouvez utiliser:

$('#my_element').show()
$('#my_element').hide()

Et si vous voulez que votre div devienne invisible et qu'il existe toujours dans la page, vous pouvez utiliser une astuce efficace:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum
4
Arsman Ahmad

Côté mise en page, affichage: aucun ne le sort complètement de l'arbre de rendu et dans ces limbes du monde inférieur. Il n'a plus de dimensions ou de position bien définies.

Si vous avez besoin d'un espace réservé pour la position de défilement, je vous suggère d'utiliser un élément d'espace réservé. Un DIV de hauteur nulle ou peut-être même un <a name="something""></a> travaillerait.

3
jpsimons

J'utilise plutôt une hauteur et une largeur fixes (hauteur: 0; largeur: 0;). N'oubliez pas d'éliminer les bordures, les rembourrages et les marges.

2
Macarrao