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

429

jquery jquery-selectors

— DEVOPS
fuente

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