如何使用jQuery改变CSS显示无或块属性?

问题描述 投票:423回答:12

如何使用jQuery改变CSS的显示为零或块属性?

jquery jquery-selectors
12个回答
931
投票

正确的方法是使用 showhide:

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

另一种方法是使用jQuery css 的方法。

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

110
投票

有几种方法可以达到这个目的,每种方法都有自己的预期目的。


1.) 要使用 直列 而简单地给一个元素分配一个要做的事情列表

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

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

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

3.) 要动态调用命令

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

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

  • 一些元素会被显示为内联、内联块或表格,这取决于 Tag N味精

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


27
投票

如果div的显示是默认的块,你可以直接使用 .show().hide(),甚至更简单。.toggle() 来切换可见性。


9
投票

用于隐藏。

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

为显示。

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

6
投票

其他方式使用jQuery的CSS方法来实现。

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

5
投票

简单的方法。

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

)}

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

2
投票

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

$('elem').toggle();

1
投票

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

这对隐藏是有效的。

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

0
投票

在我的例子中,我是根据输入元素是否为空来显示隐藏元素的,所以当隐藏元素时,隐藏元素后面的元素被重新定位,占据了它的空间,这就需要对这样一个元素的元素进行浮动:左。即使是使用dependOn这样的插件,也有必要使用float。


0
投票

使用这个。

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

或者:

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

0
投票

用这个:

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

这个是最好的方法。

© www.soinside.com 2019 - 2024. All rights reserved.