¿Cómo puedo cambiar CSS display none o bloquear la propiedad usando jQuery?

Respuestas:

923

La forma correcta de hacer esto es usar showy hide:

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

Una forma alternativa es usar el método jQuery css :

$("#id").css("display", "none");
$("#id").css("display", "block");
djdd87
fuente
@GenericTypeTea: #idusado para identificadores ¿qué pasa si quiero usar class?
AabinGunz
26
$(".class").css("display", "none");
djdd87
8
Intenté usarlo $('#id').css('display', 'none');, pero no funcionó. Sin embargo, el uso $('#id').css('color', 'red');funciona. Sin embargo, no estoy seguro de por qué. ¿Alguien tiene alguna idea? Gracias por adelantado.
David
55
También vale la pena incluir la diferencia entre $ ('# id'). Hide () y $ ("# id"). Css ("display", "none") en esta respuesta.
ManirajSS
1
Hay una diferencia entre dos, donde la función anterior oculta solo el texto y no libera un espacio ocupado por un elemento, mientras que el segundo oculta el contenido y libera el espacio ocupado por el elemento cocern
Dila Gurung
110

Hay varias formas de lograr esto, cada una con su propio propósito.

1. ) Para usar en línea mientras simplemente asigna a un elemento una lista de cosas que hacer

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

2. ) Para usar mientras se configuran varias propiedades CSS

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

3. ) Para llamar dinámicamente al comando

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

4. ) Para alternar dinámicamente entre bloque y ninguno, si es un div

  • algunos elementos se muestran como en línea, bloque en línea o tabla, dependiendo de la Ta g N ame

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

SpYk3HH
fuente
27

Si la visualización del div está bloqueada de manera predeterminada, puede usar .show()y .hide(), o incluso más simple, .toggle()alternar entre la visibilidad.

reko_t
fuente
Es cierto que establecerá la visualización en lo que era inicialmente, que podría ser bloqueado o algo diferente.
danielgwood
9

Para ocultar:

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

Para mostrar:

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

Otra forma de hacerlo usando el método jQuery CSS:

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

Manera simple:

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

)}
usuario3726824
fuente
Una explicación estaría en orden.
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
fuente
Una explicación estaría en orden.
Peter Mortensen
2

En caso de que desee ocultar y mostrar un elemento, dependiendo de si ya está visible o no, puede usar alternar en lugar de .hide()y.show()

$('elem').toggle();
Vladimir verleg
fuente
1

.hide () no funciona en Chrome para mí.

Esto funciona para esconderse:

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

En mi caso, estaba haciendo mostrar / ocultar elementos de un formulario según si un elemento de entrada estaba vacío o no, de modo que al ocultar los elementos el elemento que seguía a los ocultos se reposicionó ocupando su espacio era necesario hacer un flotador: izquierda del elemento de tal elemento. Incluso usando un complemento como depende De era necesario usar float.

usuario2341112
fuente
0

Utilizar este:

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

O:

$("#id").(":display").val("none");
Trikaldarshi
fuente
Tengo un problema, no funciona para mí :(.<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

Utilizar:

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

Esta es la mejor manera.

Saeed Ahmed
fuente