如何使用Jquery更改css display none或block属性？

最新推荐文章于 2025-03-07 15:39:54 发布

asdfgh0077

最新推荐文章于 2025-03-07 15:39:54 发布

阅读量2.8k

点赞数 1

文章标签： jquery jquery-selectors

原文链接：https://stackoom.com/question/F20B/如何使用Jquery更改css-display-none或block属性

版权

这篇博客介绍了如何使用jQuery来更改CSS的display属性，包括从none到block的切换，提供了.hide()、.show()、.toggle()等方法的示例，并讨论了不同方法在不同场景下的适用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用Jquery更改css display none或block属性？

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

#2楼

简单方法：

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

)}

#3楼

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

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

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

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

#4楼

如果默认情况下div的显示是块，则可以使用.show()和.show() .hide() ，甚至更简单的.toggle()来在可见性之间切换。

#5楼

隐藏：

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

展示：

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

#6楼

.hide（）在我的Chrome中不起作用这适用于隐藏：

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

#7楼

如果您想隐藏和显示元素，具体取决于它是否已经可见，您可以使用切换：.hide（）和.show（）

$（ 'ELEM'）切换（）。

#8楼

在我的情况下，我根据输入元素是否为空来显示/隐藏表单的元素，因此当隐藏元素时，隐藏的元素之后的元素被重新定位占据其空间，需要执行浮动：left这种元素的元素。即使使用插件作为dependsOn，也必须使用float。

#9楼

使用jQuery CSS方法执行此操作的其他方法：

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

#10楼

有几种方法可以实现这一目标，每种方法都有自己的预期目的。

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

某些元素显示为内联，内联块或表格，具体取决于Ta g N ame

$（ '＃ele_id'）切换（）。

#11楼

用这个

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

要么

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