Cách làm cho DIV hiển thị và ẩn với JavaScript

Bạn có thể làm điều gì đó như

function showDiv()
{
    [DIV].visible = true;
    //or something
}

nếu [DIV] là một phần tử thì

[DIV].style.visibility='visible'

HOẶC LÀ

[DIV].style.visibility='hidden' 

Giả sử bạn không sử dụng thư viện như jQuery.

Nếu bạn chưa có tham chiếu đến phần tử DOM, hãy lấy một tham chiếu bằng cách sử dụng var elem = document.getElementById('id');

Sau đó, bạn có thể đặt bất kỳ thuộc tính CSS nào của phần tử đó. Để hiển thị / ẩn, bạn có thể sử dụng hai thuộc tính: displayvà visibility, có các hiệu ứng hơi khác nhau:

Việc điều chỉnh style.displaysẽ trông như thể phần tử hoàn toàn không có ("loại bỏ").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

hoặc style.visibilitythực sự sẽ làm cho div vẫn ở đó, nhưng là "tất cả trống" hoặc "tất cả màu trắng"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Nếu bạn đang sử dụng jQuery, bạn có thể làm điều đó dễ dàng hơn miễn là bạn muốn đặt thuộc displaytính:

$(elem).hide();
$(elem).show();

Nó sẽ tự động sử dụng phù hợp displaygiá trị; bạn không phải quan tâm đến loại phần tử (nội dòng hoặc khối). Ngoài ra, elemkhông chỉ có thể là một phần tử DOM mà còn có thể là một bộ chọn chẳng hạn như #idhoặc .classhoặc bất kỳ thứ gì khác là CSS3 hợp lệ (và hơn thế nữa!).

Bạn có thể sử dụng visibilityhoặc displaynhưng bạn phải áp dụng các thay đổi cho div.styleđối tượng chứ không phải divbản thân đối tượng.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

Bạn có thể sử dụng các hàm DOM: setAttribute và removeAttribute. Trong liên kết sau, bạn có một ví dụ về cách sử dụng chúng.

hàm setAttribute và removeAttribute

Xem nhanh:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

Bạn có thể sử dụng opacitytương tự như visibility nhưng cho phép chuyển đổi mượt mà và kiểm soát các thông số khác như chiều cao (để đơn giản hóa đoạn mã, tôi đặt trực tiếp logic js trong html - không làm điều đó trong mã sản xuất)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Sử dụng thuộc tính 'hidden' của phần tử DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

Làm cho Ẩn mặt bằng CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Làm cho Hiển thị bằng Javascript

document.getElementById('div_id').style.visibility = 'visible';