Làm cách nào tôi có thể thay đổi hiển thị CSS hoặc chặn thuộc tính bằng jQuery?

Làm cách nào tôi có thể thay đổi hiển thị CSS hoặc chặn thuộc tính bằng jQuery?

Cách chính xác để làm điều này là sử dụng showvà hide:

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

Một cách khác là sử dụng phương thức css của jQuery :

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

Có một số cách để thực hiện điều này, mỗi cách có mục đích riêng.

1. ) Để sử dụng nội tuyến trong khi chỉ cần gán một phần tử một danh sách những việc cần làm

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

2. ) Để sử dụng trong khi thiết lập nhiều thuộc tính CSS

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

3. ) Để tự động gọi lệnh

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

4. ) Để tự động chuyển đổi giữa khối và không, nếu đó là div

• một số phần tử được hiển thị dưới dạng nội tuyến, khối nội tuyến hoặc bảng, tùy thuộc vào Ta g N ame

$ ('# ele_id'). chuyển đổi ();

Nếu màn hình của div bị chặn theo mặc định, bạn chỉ có thể sử dụng .show()và .hide(), hoặc thậm chí đơn giản hơn, .toggle()để chuyển đổi giữa khả năng hiển thị.

Để ẩn:

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

Cho chương trình:

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

Một cách khác để làm điều đó bằng phương pháp CSS CSS:

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

Cách đơn giản:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).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);

Trong trường hợp bạn muốn ẩn và hiển thị một phần tử, tùy thuộc vào việc nó có hiển thị hay không, bạn có thể sử dụng chuyển đổi thay vì .hide()và.show()

$('elem').toggle();

. leather () không hoạt động trong Chrome đối với tôi.

Điều này hoạt động để ẩn:

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

Trong trường hợp của tôi, tôi đang thực hiện hiển thị / ẩn các phần tử của biểu mẫu tùy theo phần tử đầu vào có trống hay không, do đó, khi ẩn phần tử, phần tử theo sau phần tử ẩn được định vị lại chiếm không gian của nó, cần phải thực hiện một dấu phẩy: bên trái của các yếu tố của một yếu tố như vậy. Ngay cả khi sử dụng một plugin như phụ thuộc, nó là cần thiết để sử dụng float.

Dùng cái này:

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

Hoặc là:

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

Sử dụng:

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

Đây là cách tốt nhất.