Comment puis-je changer la propriété CSS display none ou block en utilisant jQuery?

429

Comment puis-je changer la propriété CSS display none ou block en utilisant jQuery?

jquery jquery-selectors DEVOPS
la source

Réponses:

923

La bonne façon de procéder consiste à utiliser showet hide:

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

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

$("#id").css("display", "none");
$("#id").css("display", "block");
djdd87
la source
@GenericTypeTea: #idutilisé pour les identifiants qu'en est-il si je veux utiliser class?
AabinGunz
26
$(".class").css("display", "none");
djdd87
8
J'ai essayé d'utiliser $('#id').css('display', 'none');, mais cela n'a pas fonctionné. Cependant, l'utilisation $('#id').css('color', 'red');fonctionne. Je ne sais pas pourquoi, cependant. Quelqu'un a-t-il une idée? Merci d'avance.
David
5
Il convient également d'inclure la différence entre $ ('# id'). Hide () et $ ("# id"). Css ("display", "none") dans cette réponse.
ManirajSS
1
Il y a une différence entre deux, où l'ancienne fonction masque uniquement le texte et ne libère pas un espace occupé par un élément tandis que cette dernière masque le contenu et libère l'espace occupé par l'élément cocern
Dila Gurung
110

Il existe plusieurs façons d'y parvenir, chacune avec son propre objectif.

1. ) Pour utiliser inline tout en assignant simplement à un élément une liste de choses à 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 la commande

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

4. ) Pour basculer dynamiquement entre bloc et aucun, si c'est un div

  • certains éléments sont affichés sous forme de ligne, de bloc en ligne ou de tableau, selon le Ta g N ame

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

SpYk3HH
la source
27

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

reko_t
la source
Certes, il définira l'affichage sur ce qu'il était initialement, ce qui pourrait être un bloc ou quelque chose de différent.
danielgwood
9

Pour masquer:

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

Pour le spectacle:

$("#id").css("display", "");
Phanikumar Jatavallabhula
la source
6

Autre façon de le faire en utilisant la méthode CSS jQuery:

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

Manière simple:

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

)}
user3726824
la source
Une explication serait de mise.
Peter Mortensen
2 
(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);
Pham
la source
Une explication serait de mise.
Peter Mortensen
2

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

$('elem').toggle();
Vladimir verleg
la source
1

.hide () ne fonctionne pas dans Chrome pour moi.

Cela fonctionne pour cacher:

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

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

user2341112
la source
0

Utilisez ceci:

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

Ou:

$("#id").(":display").val("none");
Trikaldarshi
la source
j'ai un problème, ça ne marche pas pour moi :(.<style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>
jaibalaji
0

Utilisation:

$(#id/.class).show()
$(#id/.class).hide()

Celui-ci est le meilleur moyen.

Saeed Ahmed
la source