How to change css display none or block property using Jquery?

问题

回答1:

The correct way to do this is to use show and hide:

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

An alternate way is to use the jQuery css method:

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

回答2:

There are several ways to accomplish this, each with it's own intended purpose.

1.) To use inline while simply assigning an element a list of things to do

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

2.) To use while setting multiple CSS Properties

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

3.) To dynamically call on command

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

4.) To dynamically toggle between block and none, if it's a div

some elements are displayed as inline, inline-block, or table, depending on the Tag Name

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

回答3:

If the display of the div is block by default, you can just use .show() and .hide(), or even simpler, .toggle() to toggle between visibility.

回答4:

for hide:

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

for show:

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

回答5:

Other way to do it using jQuery CSS method:

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

回答6:

Simple way:

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

)}

回答7:

In case you want to hide and show an element depending on whether it is already visible or not you can use toggle instead: of .hide() and .show()

$('elem').toggle();

回答8:

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

回答9:

.hide() does not work in Chrome for me This works for hidding:

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

回答10:

use this

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

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

回答11:

In my case I was doing show / hide elements of a form according to whether an input element was empty or not, so that when hiding the elements the element following the hidden ones was repositioned occupying its space it was necessary to do a float: left of the element of such an element. Even using a plugin as dependsOn it was necessary to use float.

来源：https://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery

标签

jquery

jquery-selectors