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


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");

@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 ();


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é.


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


6

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

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


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);

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();

1

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

Cela fonctionne pour cacher:

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

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.


0

Utilisez ceci:

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

Ou:

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

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.