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

429

jquery jquery-selectors

— DEVOPS
source

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
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
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
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
source

6

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

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

— Miguel
source

5

Manière simple:

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

)}

— user3726824
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
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
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
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
source

0

Utilisez ceci:

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

Ou:

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

— Trikaldarshi
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
source