Làm thế nào để bạn tạo một div ẩn không tạo ra ngắt dòng hoặc không gian ngang?

Tôi muốn có một hộp kiểm ẩn mà không chiếm bất kỳ khoảng trống nào trên màn hình.

Nếu tôi có điều này:

<div id="divCheckbox" style="visibility: hidden">

Tôi không thấy hộp kiểm, nhưng nó vẫn tạo ra một dòng mới.

Nếu tôi có điều này:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

nó không còn tạo ra một dòng mới, mà nó chiếm không gian ngang trên màn hình.

Có cách nào để có một div ẩn không chiếm phòng (dọc hoặc ngang không?

Sử dụng display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hidden ẩn phần tử, nhưng nó vẫn chiếm không gian trong bố cục.

• display: none loại bỏ hoàn toàn phần tử khỏi tài liệu, nó không chiếm bất kỳ khoảng trống nào.

Kể từ khi phát hành HTML5, người ta có thể chỉ cần làm:

<div hidden>This div is hidden</div>

Lưu ý: Điều này không được hỗ trợ bởi một số trình duyệt cũ, đáng chú ý nhất là IE <11.

Tài liệu thuộc tính ẩn ( MDN , W3C )

Sử dụng style="display: none;". Ngoài ra, có lẽ bạn không cần phải có DIV, chỉ cần đặt kiểu display: nonetrên hộp kiểm có thể là đủ.

Ngoài câu trả lời CMS, bạn có thể muốn xem xét đưa kiểu vào biểu định kiểu bên ngoài và gán kiểu cho id, như sau:

#divCheckbox {
display: none;
}

Vì bạn nên tập trung vào tính khả dụng và tính tổng quát trong CSS, thay vì sử dụng id để trỏ đến một thành phần bố cục cụ thể (dẫn đến các tệp css lớn hoặc nhiều), thay vào đó, bạn có thể nên sử dụng một lớp thực trong tệp .css được liên kết của mình:

.hidden {
visibility: hidden;
display: none;
}

hoặc cho tối giản:

.hidden {
display: none;
}

Bây giờ bạn có thể chỉ cần áp dụng nó thông qua:

<div class="hidden"> content </div>

Cân nhắc sử dụng <span>để cách ly các phân đoạn đánh dấu nhỏ được tạo kiểu mà không phá vỡ bố cục. Điều này dường như là thành ngữ hơn là cố gắng buộc <div>không hiển thị chính nó - nếu trên thực tế, hộp kiểm tự nó không thể được tạo kiểu theo cách bạn muốn.

Hiển thị / ẩn bằng cách nhấp chuột:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Nguồn: Tại đây

Để ngăn hộp kiểm chiếm bất kỳ khoảng trống nào mà không xóa nó khỏi DOM, hãy sử dụng hidden.

<div hidden id="divCheckbox">

Để ngăn hộp kiểm chiếm bất kỳ dung lượng nào và cũng xóa nó khỏi DOM, hãy sử dụng display: none.

<div id="divCheckbox" style="display:none">

Để ẩn phần tử một cách trực quan , nhưng giữ nó trong html, bạn có thể sử dụng:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

hoặc là

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

Điều gì có thể đi sai với display:none? Nó loại bỏ hoàn toàn phần tử khỏi html, vì vậy một số chức năng có thể bị phá vỡ nếu chúng cần truy cập vào phần tử ẩn.

display: none;

Điều này sẽ làm cho phần tử biến mất và không chiếm bất kỳ không gian nào.