web-dev-qa-db-fra.com

Comment changer le css display none ou bloquer la propriété en utilisant Jquery?

Comment changer le css display none ou bloquer la propriété en utilisant Jquery?

jqueryjquery-selectors
358
learner

Pour ce faire, utilisez show et hide:

$('#id').hide();
$('#id').show();

Une autre méthode consiste à utiliser la méthode jQuery css :

$("#id").css("display", "none");
$("#id").css("display", "block");
767
djdd87

Il y a plusieurs façons d'y parvenir, chacune avec son propre but.

1 .) Utiliser en ligne en assignant simplement à un élément une liste d'activités à faire

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2 .) À utiliser lors de la définition de plusieurs propriétés CSS

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3 .) Pour appeler dynamiquement une commande

$('#ele_id').show();
$('#ele_id').hide();

4 .) Pour basculer dynamiquement entre bloc et aucun, s'il s'agit d'un div

  • , certains éléments sont affichés sous forme de texte en ligne, bloc en ligne ou tableau, en fonction de Tag Name

$ ('# ele_id'). toggle ();

102
SpYk3HH

Si l'affichage du div est bloqué par défaut, vous pouvez simplement utiliser .show() et .hide(), ou même plus simplement, .toggle() pour basculer entre la visibilité.

27
reko_t

Manière simple:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}
5
user3726824

pour cacher:

$("#id").css("display", "none");

pour le spectacle:

$("#id").css("display", "");
5
Phanikumar Jatavallabhula

Une autre façon de faire en utilisant la méthode CSS jQuery:

$("#id").css({display: "none"});
$("#id").css({display: "block"});
4
Miguel

Si vous souhaitez masquer et afficher un élément selon qu'il est déjà visible ou non, vous pouvez utiliser à la place les options bascule: de .hide () et .show ()

$ ('elem'). toggle ();

1
Peter verleg
(function($){
    $.fn.displayChange = function(fn){
        $this = $(this);
        var state = {};
        state.old = $this.css('display');
        var intervalID = setInterval(function(){
            if( $this.css('display') != state.old ){
                state.change = $this.css('display');
                fn(state);
                state.old = $this.css('display');
            }
        }, 100);        
    }

    $(function(){
        var tag = $('#content');
        tag.displayChange(function(obj){
            console.log(obj);
        });  
    })   
})(jQuery);
1
Pham

Dans mon cas, je faisais afficher/masquer des éléments d'un formulaire selon qu'un élément d'entrée était vide ou non, de sorte que lors du masquage des éléments, l'élément suivant les éléments cachés était repositionné en occupant son espace, il était nécessaire de créer un flottant: de l'élément d'un tel élément. Même en utilisant un plugin comme dependOn, il était nécessaire d'utiliser float.

0
user2341112

.hide () ne fonctionne pas dans Chrome pour moi Cela fonctionne pour cacher:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
0
jimver04

utilisez ceci 

$("#id").(":display").val("block");

ou 

$("#id").(":display").val("none");
0
Trikaldarshi