Jak Mogę zmienić właściwość CSS display none lub block przy użyciu jQuery?

Istnieje kilka sposobów, aby to osiągnąć, każdy z własnym zamierzonym celem.

1. Aby użyć inline , po prostu przypisując elementowi listę rzeczy do zrobienia

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

2.) Do użycia podczas ustawiania wielu właściwości CSS

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

3.) Do dynamicznego wywołania polecenia

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

4.) Dynamicznie przełączać między block i none, jeśli jest to div

• niektóre elementy to wyświetlane jako inline, inline-block lub table, w zależności od Tag Name

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

Jeśli wyświetlanie div jest domyślnie zablokowane, możesz po prostu użyć .show() i .hide(), lub nawet prościej, .toggle(), aby przełączać między widocznością.

Dla ukrycia:

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

Na pokaz:

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

Inny sposób, aby to zrobić przy użyciu metody jQuery CSS:

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

Prosty sposób:

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

)}

Jeśli chcesz ukryć i pokazać element, w zależności od tego, czy jest już widoczny, możesz użyć Przełącz zamiast .hide() i .show()

$('elem').toggle();

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

.hide () nie działa dla mnie w Chrome.

To działa do ukrycia:

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

W moim przypadku wykonywałem Pokazywanie / ukrywanie elementów formularza w zależności od tego, czy element wejściowy jest pusty, czy nie, tak aby podczas ukrywania elementów element podążający za ukrytymi został przesunięty zajmując jego przestrzeń, konieczne było wykonanie float: left of the element takiego elementu. Nawet używając wtyczki jako dependsOn konieczne było użycie float.

Użyj tego:

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

Lub:

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

Użycie:

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

W javascript:

document.getElementById("myDIV").style.display = "none";

I w jquery:

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

I możesz użyć:

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

Możesz to zrobić za pomocą przycisku

<button onclick"document.getElementById('elementid').style.display = 'none or block';">