如何使用Jquery更改css显示无或块属性?

时间:2022-11-28 16:42:27

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

如何使用Jquery更改css显示无或块属性?

10 个解决方案

#1


680  

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

正确的方法是使用show和hide:

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

An alternate way is to use the jQuery css method:

另一种方法是使用jQuery css方法:

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

#2


91  

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

1)。在简单地为元素分配要做的事情列表时使用内联

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

2.) To use while setting multiple CSS Properties

2)。在设置多个CSS属性时使用

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

3.) To dynamically call on command

3)。动态调用命令

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

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

4)。如果是div,则动态地在block和none之间切换

  • some elements are displayed as inline, inline-block, or table, depending on the Tag Name
  • 根据标记名,有些元素显示为内联、内联块或表

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

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

#3


25  

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.

如果div的显示默认为块,您可以使用.show()和.hide(),或者更简单的.toggle()来切换可见性。

#4


5  

Simple way:

简单的方法:

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

)}

#5


5  

for hide:

隐藏:

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

for show:

显示:

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

#6


3  

Other way to do it using jQuery CSS method:

用jQuery CSS方法实现:

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

#7


1  

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

#8


1  

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

如果您想隐藏和显示一个元素,取决于它是否已经可见,或者您可以使用toggle来代替:.hide()和.show()

$('elem').toggle();

$(' elem ').toggle();

#9


0  

use this

使用这个

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

or

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

#10


0  

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

.hide()对我来说在Chrome中不起作用。

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

#1


680  

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

正确的方法是使用show和hide:

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

An alternate way is to use the jQuery css method:

另一种方法是使用jQuery css方法:

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

#2


91  

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

1)。在简单地为元素分配要做的事情列表时使用内联

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

2.) To use while setting multiple CSS Properties

2)。在设置多个CSS属性时使用

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

3.) To dynamically call on command

3)。动态调用命令

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

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

4)。如果是div,则动态地在block和none之间切换

  • some elements are displayed as inline, inline-block, or table, depending on the Tag Name
  • 根据标记名,有些元素显示为内联、内联块或表

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

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

#3


25  

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.

如果div的显示默认为块,您可以使用.show()和.hide(),或者更简单的.toggle()来切换可见性。

#4


5  

Simple way:

简单的方法:

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

)}

#5


5  

for hide:

隐藏:

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

for show:

显示:

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

#6


3  

Other way to do it using jQuery CSS method:

用jQuery CSS方法实现:

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

#7


1  

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

#8


1  

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

如果您想隐藏和显示一个元素,取决于它是否已经可见,或者您可以使用toggle来代替:.hide()和.show()

$('elem').toggle();

$(' elem ').toggle();

#9


0  

use this

使用这个

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

or

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

#10


0  

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

.hide()对我来说在Chrome中不起作用。

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